jQuery 表单验证扩展(四)_jquery
周末写的 jQuery 表单验证扩展(三) 这篇文章点击率过低,不知道是文章太失水准还是什么其他原因,这里写文章只是为了分享一下自己写代码的心得,同时也是巩固自己所学的东西!如果文章中存在问题,请大家多多斧正!本篇文章介绍jQuery 表单验证扩展中的控件值的比较
(一). 存在的问题
这篇文章和第一篇中提到的控件值之间的比较没有多大的区别,唯一更近的就是在样式的处理。同时就是对代码进行了简化。但是这里还是单独拿出来讲解一下,此文非常简单,所以不会有大篇幅的讲解。
(二). 参数介绍
onFocusText:获得焦点提示文字
onFocusClass:获得焦点样式
onEmptyText:当输入项为空显示文字
onEmptyClass:当输入项为空显示样式
onErrorText:验证错误显示文字
onErrorClass:输入验证错误显示样式
onSuccessText:输入成功显示文本
onSuccessClass:输入成功显示样式
comType:比较类型
dataType:输入比较内容的数据类型
dataType:输入比较内容的数据类型
comId:相比较的目标控件ID
targetId:用于显示提示信息的控件id
这里的比较类型分为如下几种: “==” “!=” “>” “>=” “比较的数据类型分为如下几种: "text" "number" "date"
这里对date 数据类型还没有做任何处理,在后期过程中更新
(三). 控件值之间的比较源码解析
jQuery控件值之间的比较 源码解析
/**
* onFocusText:获得焦点提示文字
* onFocusClass:获得焦点样式
* onEmptyText:当输入项为空显示文字
* onEmptyClass:当输入项为空显示样式
* onErrorText:验证错误显示文字
* onErrorClass:输入验证错误显示样式
* onSuccessText:输入成功显示文本
* onSuccessClass:输入成功显示样式
* comType:比较类型
* dataType:输入比较内容的数据类型
* comId:相比较的目标控件ID
* targetId:用于显示提示信息的控件id
* @param {Object} inputArg
*/
$.fn.extend({
checkCompare:function(inputArg){
//只验证输入框信息
if($(this).is("input") || $(this).is("textarea")){
if($(this).attr("type")!="radio" && $(this).attr("type")!="checkbox"){
//绑定获得焦点事件
$(this).bind("focus",function(){
var value=$(this).val();
if(value!=undefined && value!=""){
}else{
//显示获得焦点文本
addText(inputArg.targetId,inputArg.onEmptyText);
//切换样式
addClass(inputArg.targetId,inputArg.onEmptyClass);
}
});
//绑定失去焦点事件
$(this).bind("blur",function(){
var value=$(this).val();
if(value==undefined || value==""){
//显示获得焦点文本
addText(inputArg.targetId,inputArg.onEmptyText);
//切换样式
addClass(inputArg.targetId,inputArg.onEmptyClass);
}else{
var targetValue=$("#"+inputArg.comId).val();
var flag=false;
switch(inputArg.dataType){
case "text":
if(inputArg.comType == "=="){
flag=value==targetValue?true:false;
}else if(inputArg.comType=="!="){
flag=value!=targetValue?true:false;
}
break;
case "number":
if(inputArg.comType=="=="){
flag=value==targetValue?true:false;
}else if(inputArg.comType=="!="){
flag=value!=targetValue?true:false;
}else if(inputArg.comType==">"){
flag=value>targetValue?true:false;
}else if(inputArg.comType==">="){
flag=value>=targetValue?true:false;
}else if(inputArg.comType=="flag=value
break;
case "date":
break;
}
if(flag){
//显示获得焦点文本
addText(inputArg.targetId, inputArg.onSuccessText);
//切换样式
addClass(inputArg.targetId, inputArg.onSuccessClass);
}else{
//显示获得焦点文本
addText(inputArg.targetId, inputArg.onErrorText);
//切换样式
addClass(inputArg.targetId, inputArg.onErrorClass);
}
}
});
}
}
}
});
这段代码其实非常简单了,因为没有涉及到复杂的判断,只是在不同类型值之间的比较关系,同时也限定了比较的控件类型text 和 textarea 两种元素。这个大大简化了验证的复杂度。这段代码相对之间也有所精简,这里的精简不是对功能的减少,而是对代码的重构,方法的提取。这里面用到了上几篇文章的功用方法,用于添加文本和修改样式信息。
添加文本和样式信息 功用代码解析
/**
* 根据输入框的不同类型来判断
* @param {Object} flag
* @param {Object} inputArg
*/
function addMessage(flag,inputArg){
if(flag){
//显示正确信息文本
addText(inputArg.targetId,inputArg.onSuccessText);
//切换样式
addClass(inputArg.targetId,inputArg.onSuccessClass);
}else{
//显示错误信息文本
addText(inputArg.targetId,inputArg.onErrorText);
//切换样式
addClass(inputArg.targetId,inputArg.onErrorClass);
}
}
/**
* 给目标控件添加显示的文本信息
* @param {Object} targetId 目标控件id
* @param {Object} text 需要显示的文本信息
*/
function addText(targetId,text){
if(text==undefined){
text="";
}
$("#"+targetId).html(" "+text);
}
/**
* 切换样式
* @param {Object} targetId 目标控件id
* @param {Object} className 显示的样式名称
*/
function addClass(targetId,className){
if(className!=undefined && className!=""){
$("#"+targetId).removeClass();
$("#"+targetId).addClass(className);
}
}
内容还是一样,没有做任何更改,这里再次贴出这段代码,是为了方便查看方法体,没有其他的作用!
(四). 使用例子
字符串之间的比较效果图
获得焦点时候提示
失去焦点验证错误提示
失去焦点验证成功
以上是对字符的比较验证,其验证测试代码如下
数字之间的验证
数字验证获得焦点提示作用
数字验证失去焦点验证失败
数字验证失去焦点验证成功
文章内容不想做过多的解释了,此文非常简单,相对于前面几篇文章来说。表单验证扩展不断更新中,后续期待............

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Cara menggunakan Flask-WTF untuk melaksanakan pengesahan borang Flask-WTF ialah sambungan Flask untuk mengendalikan pengesahan borang web Ia menyediakan cara yang ringkas dan fleksibel untuk mengesahkan data yang diserahkan oleh pengguna. Artikel ini akan menunjukkan kepada anda cara menggunakan sambungan Flask-WTF untuk melaksanakan pengesahan borang. Pasang Flask-WTF Untuk menggunakan Flask-WTF, anda perlu memasangnya terlebih dahulu. Anda boleh menggunakan arahan pip untuk memasang: pipinstallFlask-WTF import modul yang diperlukan dalam F

Laravel ialah rangka kerja pembangunan web PHP yang popular yang menyediakan banyak ciri mudah untuk mempercepatkan kerja pembangun. Antaranya, LaravelValidation ialah fungsi yang sangat praktikal yang boleh membantu kami mengesahkan permintaan borang dan data yang dimasukkan pengguna dengan mudah. Artikel ini akan memperkenalkan cara menggunakan LaravelValidation untuk mengesahkan permintaan borang. Apakah itu LaravelValidationLaravelValidation ialah La

Pengesahan borang adalah pautan yang sangat penting dalam pembangunan aplikasi web Ia boleh menyemak kesahihan data sebelum menyerahkan data borang untuk mengelakkan kelemahan keselamatan dan ralat data dalam aplikasi. Pengesahan borang untuk aplikasi web boleh dilaksanakan dengan mudah menggunakan Golang Artikel ini akan memperkenalkan cara menggunakan Golang untuk melaksanakan pengesahan borang untuk aplikasi web. 1. Elemen asas pengesahan borang Sebelum memperkenalkan cara melaksanakan pengesahan borang, kita perlu mengetahui apakah elemen asas pengesahan borang. Unsur bentuk: unsur bentuk ialah

PHP ialah bahasa pengaturcaraan yang sangat popular, dan CodeIgniter4 ialah rangka kerja PHP yang biasa digunakan. Apabila membangunkan aplikasi web, menggunakan rangka kerja sangat membantu Ia boleh mempercepatkan proses pembangunan, meningkatkan kualiti kod dan mengurangkan kos penyelenggaraan. Artikel ini akan memperkenalkan cara menggunakan rangka kerja CodeIgniter4. Pasang rangka kerja CodeIgniter4 Rangka kerja CodeIgniter4 boleh dimuat turun dari laman web rasmi (https://codeigniter.com/). Bawah

Petua pengesahan borang PHP: Cara menggunakan fungsi filter_input untuk mengesahkan input pengguna Pengenalan: Apabila membangunkan aplikasi web, borang ialah alat penting untuk berinteraksi dengan pengguna. Mengesahkan input pengguna dengan betul adalah salah satu langkah utama untuk memastikan integriti dan keselamatan data. PHP menyediakan fungsi filter_input, yang boleh mengesahkan dan menapis input pengguna dengan mudah. Artikel ini akan memperkenalkan cara menggunakan fungsi filter_input untuk mengesahkan input pengguna dan memberikan contoh kod yang berkaitan. satu,

Cara menggunakan perisian tengah untuk mengendalikan pengesahan borang dalam Laravel, contoh kod khusus diperlukan Pengenalan: Pengesahan borang ialah tugas yang sangat biasa dalam Laravel. Untuk memastikan kesahihan dan keselamatan data yang dimasukkan oleh pengguna, kami biasanya mengesahkan data yang diserahkan dalam borang. Laravel menyediakan fungsi pengesahan borang yang mudah dan juga menyokong penggunaan perisian tengah untuk mengendalikan pengesahan borang. Artikel ini akan memperkenalkan secara terperinci cara menggunakan perisian tengah untuk mengendalikan pengesahan borang dalam Laravel dan memberikan contoh kod khusus.

PHP ialah bahasa skrip yang digunakan secara meluas dalam pembangunan web, dan pengesahan dan penapisan bentuknya merupakan bahagian yang sangat penting. Apabila pengguna menyerahkan borang, data yang dimasukkan oleh pengguna perlu disahkan dan ditapis untuk memastikan keselamatan dan kesahihan data. Artikel ini akan memperkenalkan kaedah dan teknik tentang cara melaksanakan pengesahan dan penapisan borang dalam PHP. 1. Pengesahan borang Pengesahan borang merujuk kepada menyemak data yang dimasukkan oleh pengguna untuk memastikan data mematuhi peraturan dan keperluan tertentu. Pengesahan borang biasa termasuk pengesahan medan yang diperlukan, format e-mel dan format nombor telefon mudah alih.

ThinkPHP6 ialah rangka kerja MVC berasaskan PHP yang sangat memudahkan pembangunan aplikasi web. Antaranya, pengesahan borang adalah fungsi yang sangat asas dan penting. Dalam artikel ini, kami akan memperkenalkan cara melaksanakan operasi pengesahan borang dalam ThinkPHP6. 1. Definisi peraturan pengesahan Dalam ThinkPHP6, peraturan pengesahan perlu ditakrifkan dalam pengawal Kita boleh mentakrifkan peraturan dengan mentakrifkan atribut $validate dalam pengawal, seperti yang ditunjukkan di bawah: usethinkVa
