2023年6月21日发(作者：)

jQuery表单验证（Validate）使⽤⽅法表单的校验是jQuery给页⾯开发者带来极⼤便利的功能之⼀，⽆论是在校⼤学⽣还是已经上班的⼯程师，都可以了解⼀下表单校验的基本功能。⽬录1.先来⼀张简单的表单

2.引⼊需要⽤到的jQuery⽅便起见我们直接引⼊在线的jQuery，⼀个基本的和⼀个表单验证需要⽤到的。如果有需要的话可以直接将连接复制到浏览器打开，复制页⾯上的内容，粘贴到本地⽂件也是可以的。 3.指定需要验证的内容在页⾯的中写⼊JS代码 在原先页⾯的基础上，找到需要验证的输⼊框，在class中输⼊class="required"

4.如何⾃定义报错信息的位置例如我想让出错信息出现在输⼊框的下⽅，该如何做呢。也是⽐较简单的，不过设计到页⾯的变动，只不过我们需要稍微修改⼀下页⾯的布局。

有看出和原来的区别吗？我们在输⼊框的周围加了⼀层
,同时为了确保错误信息可以显⽰在输⼊框的下⽅，我们还添加了⼀个

新增的JS代码 上述代码和原先相⽐，这⾥新增⼀个函数errorPlacement，errorPlacement这个函数是jQuery内置的，error表⽰错误信息，element表⽰校验的元素。这⾥选择在元素的⽗元素（就是我们之前加的

）的下⽅添加错误信息，为了保证换⾏效果，还在其中添加了

元素。5.如何添加其他的验证信息呢例如长度限制、是否要求为整数等等，显然在class⾥⾯添加过多的元素并不是⼀个好主意，所以我们选择在JS中增加输⼊框的验证要求。直接上代码 在之前的JS代码中，我们新增了rules，在rules中输⼊需要验证的输⼊框的id，然后输⼊需要限定的内容即可。如上述代码所⽰，这⾥要求输⼊框的长度不得查过3个长度（有需要其他校验要求的可以百度⼀下看关键字是什么），同时要求输⼊的数字为整数，来看⼀下效果6.如何让显⽰的内容为中⽂呢⼜或者说，我希望⾃定义报错的信息。在JS中新增⼀段代码 $.extend($.es, { required: "这是必填字段" })现在我们再来看看效果当然了，没有定义的内容还是默认显⽰英⽂。7.动态⽣成的代码如何添加限定条件呢在某些特定的场景下，页⾯上显⽰的内容都是根据数据库⾥返回的数据从⽽动态⽣成的，包括输⼊框的校验要求，那该如何处理呢。这⾥我们就可以⽤到jQuery动态添加验证规则。⾸先为了让代码更见简介，也能让⼤家更加清晰，我们先去掉⼿动添加的校验规则和⾃定义报错信息。原始的JS代码如下： 使⽤jQuery动态添加验证规则的JS代码： 新增的⼀段代码是 $("#account").rules("add", { required : true });同理，如果我们希望整个页⾯都是动态的，只要保证后台返回的数据⾥⾯包含：1.页⾯元素ID2.校验要求（如required，maxlength等等）3.校验数值（例如true或者数字）8.我想⾃定义校验规则的名字怎么办⽬前来看，我们引⼊的都是在线亦或者是⼈家写好的，像number、digits等名字都是定好的，如果我想把number改为numberForMe之类的，要如何去做呢。只要在JS⾥⾯加⼀个函数就可以了，如下所⽰： hod("numberForMe",function(a,b){ //开始做校验，返回false表⽰要显⽰错误信息，返回true表⽰⽆需显⽰。 XXXXXX return true或者false; },$.("请输⼊数字") );完整JS代码： 这样⼦即⾃定义了校验的名字，⼜可以⾃定义校验规则，还可以⾃定义校验的输出，⼀举多得。

2023年6月21日发(作者：)

jQuery表单验证（Validate）使⽤⽅法表单的校验是jQuery给页⾯开发者带来极⼤便利的功能之⼀，⽆论是在校⼤学⽣还是已经上班的⼯程师，都可以了解⼀下表单校验的基本功能。⽬录1.先来⼀张简单的表单

2.引⼊需要⽤到的jQuery⽅便起见我们直接引⼊在线的jQuery，⼀个基本的和⼀个表单验证需要⽤到的。如果有需要的话可以直接将连接复制到浏览器打开，复制页⾯上的内容，粘贴到本地⽂件也是可以的。 3.指定需要验证的内容在页⾯的中写⼊JS代码 在原先页⾯的基础上，找到需要验证的输⼊框，在class中输⼊class="required"

4.如何⾃定义报错信息的位置例如我想让出错信息出现在输⼊框的下⽅，该如何做呢。也是⽐较简单的，不过设计到页⾯的变动，只不过我们需要稍微修改⼀下页⾯的布局。

有看出和原来的区别吗？我们在输⼊框的周围加了⼀层
,同时为了确保错误信息可以显⽰在输⼊框的下⽅，我们还添加了⼀个

新增的JS代码 上述代码和原先相⽐，这⾥新增⼀个函数errorPlacement，errorPlacement这个函数是jQuery内置的，error表⽰错误信息，element表⽰校验的元素。这⾥选择在元素的⽗元素（就是我们之前加的

）的下⽅添加错误信息，为了保证换⾏效果，还在其中添加了

元素。5.如何添加其他的验证信息呢例如长度限制、是否要求为整数等等，显然在class⾥⾯添加过多的元素并不是⼀个好主意，所以我们选择在JS中增加输⼊框的验证要求。直接上代码 在之前的JS代码中，我们新增了rules，在rules中输⼊需要验证的输⼊框的id，然后输⼊需要限定的内容即可。如上述代码所⽰，这⾥要求输⼊框的长度不得查过3个长度（有需要其他校验要求的可以百度⼀下看关键字是什么），同时要求输⼊的数字为整数，来看⼀下效果6.如何让显⽰的内容为中⽂呢⼜或者说，我希望⾃定义报错的信息。在JS中新增⼀段代码 $.extend($.es, { required: "这是必填字段" })现在我们再来看看效果当然了，没有定义的内容还是默认显⽰英⽂。7.动态⽣成的代码如何添加限定条件呢在某些特定的场景下，页⾯上显⽰的内容都是根据数据库⾥返回的数据从⽽动态⽣成的，包括输⼊框的校验要求，那该如何处理呢。这⾥我们就可以⽤到jQuery动态添加验证规则。⾸先为了让代码更见简介，也能让⼤家更加清晰，我们先去掉⼿动添加的校验规则和⾃定义报错信息。原始的JS代码如下： 使⽤jQuery动态添加验证规则的JS代码： 新增的⼀段代码是 $("#account").rules("add", { required : true });同理，如果我们希望整个页⾯都是动态的，只要保证后台返回的数据⾥⾯包含：1.页⾯元素ID2.校验要求（如required，maxlength等等）3.校验数值（例如true或者数字）8.我想⾃定义校验规则的名字怎么办⽬前来看，我们引⼊的都是在线亦或者是⼈家写好的，像number、digits等名字都是定好的，如果我想把number改为numberForMe之类的，要如何去做呢。只要在JS⾥⾯加⼀个函数就可以了，如下所⽰： hod("numberForMe",function(a,b){ //开始做校验，返回false表⽰要显⽰错误信息，返回true表⽰⽆需显⽰。 XXXXXX return true或者false; },$.("请输⼊数字") );完整JS代码： 这样⼦即⾃定义了校验的名字，⼜可以⾃定义校验规则，还可以⾃定义校验的输出，⼀举多得。