Form validation plug-in---How to use jquery.validate-JS Tutorial-php.cn

Today we will talk about form verification. Some people say that it is very troublesome to use regular expressions to verify when we perform form verification. Now let me introduce it to you. Here is a form validation plug-in: jquery.validate.min.js

It is used in conjunction with jquery. It is very convenient to use it. You only need to write verification rules and errors. field.

# Our common verification rules are the following:

(1) Required: True must lose field
(2) email:true You must enter the email in the correct format
(3)date:true You must enter the date in the correct format
(4)dateISO:true You must enter the date in the correct format (ISO)
(5)digits :true You must enter an integer
(6)equalTo:"#pass" The input value must be the same as #pass
(7)maxlength:5 Enter a string with a maximum length of 5
(8)minlength:10 Enter a string with a minimum length of 10
(9)rangelength:[5,10] The input length must be between 5 and 10
(10)range:[5,10] The input value must be between 5 Between 10 Okay, but you don’t need to write it, because it has an English prompt field. Let’s take a look at the following code:

It is essential for us to introduce the plug-in before using it. jquery files and plugins



然后就来看一下html代码

Copy after login

 //写表单验证比不缺少的是我们的form标签
  //关于用户名的布局
 username:
 
 

 //关于密码的布局

Copy after login

 password:

//重置密码
form-password:

//年龄
age:

//email
email:

//我们在提交数据时提交的按钮应该为submit类型的

接着再来看一下js代码

Copy after login

$(function () {
$("#mgForm").validate({
rules:{//写入文本框中的限制条件
username:{ //指的是input中name的名字
required:true,//不能为空
minlength:6,//最短为6个
maxlength:10//最长为10个
},
age:{
// range:[18,80] //年龄范围为18-80
required:true, //不能为空
},
password:{
required:true,//必填
rangelength:[2,6] //长度为2-6
},
password1:{
equalTo:"#pass" //重置密码必须与#pass中的密码保持一致
},
email:{
email:true //email保证格式正确
}
},
messages:{//提示信息
username:{ //用户名
required:"*此项必填",
minlength:"*用户名最小是6位",
maxlength:"*用户名最大是10位"
},
age:{//年龄
range:"*年龄必须在18-80之间"
PostCode:"错误"
},
password:{//密码
required:"*必填",
rangelength:"2-6"
},
password1:{//重置密码
equalTo:"*密码不一致"
},
email:{//邮箱格式
email:"*邮箱格式不正确"
}
},
submitHanfler:function () {//如果全部验证正确就弹出弹窗
alert("全部通过")
},
errorClass:"wrong",//给错误字段添加wrong样式
ignore:"#pass1",//忽略密码不一
errorElement:"div",//错误信息单独显示一行
focusInvalid:true,//提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
focusCleanup:true,// 当未通过验证的元素获得焦点时,并移除错误提示
highlight:function (element,errorClass) {//在信息错误时会出现一闪的效果
$(element).addClass(errorClass);
$(element).fadeOut().fadeIn()
}
});
$.validator.addMethod("PostCode",function () { //此外，我们还可自定义样式
var reg=/^[0-9]{6}$/;
return reg.test(value)
},"邮编输入不正确");
});

The above is the detailed content of Form validation plug-in---How to use jquery.validate. For more information, please follow other related articles on the PHP Chinese website!