This article introduces the jQuery Validate format verification function to everyone through example code. The code includes the method of duplicate name verification. Friends who need it can refer to it. I hope it can help everyone.
Introduce two js files jQuery-1.7.1.js and jquery.validate.js
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script>
$().ready(function () {
///自定义ajax验证
jQuery.validator.addMethod("ExistsCompany", function (value, element) { //用jquery ajax的方法验证电话是不是已存在
var flag = 1;
$.ajax({
type: "POST",
url: '/CustomerMonkey/ExistsCompanyAction',
async: false,
data: {
'name': value, "monkeyid": GetQueryString("monkeyid"), "customerid": function () {
return $("#hidCustomerID").val();
}
},
success: function (data) {
if (data.result == "TRUE") {
flag = 0;
}
else if (data.result == "NO") {
compaymsg = "Name does not exist";
}
}
});
if (flag == 0) {
return true;
} else {
return false;
}
}, compaymsg);
$("#form1").validate({
rules: {
txtUserName:
{
required: true,
minlength: 6,
rangelength: [6, 20], //长度5-10之间
remote: {
url: "/admin/CheckName", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
name: function () {
return $("#txtUserName").val();
}
}
},
ExistsCompany: true,
},
txtPassword: {
required: true,
minlength: 6,
rangelength: [6, 20], //长度5-10之间
password: true,
},
txtPwd: {
required: true,
equalTo: "#txtPassword",
minlength: 6,
rangelength: [5, 20], //长度5-10之间
password: true,
},
txtDisplayName: {
required: true,
minlength: 6,
rangelength: [6, 20], //长度5-10之间
},
txtAge: {
required: true,
digits: true,
min: 1,
max: 100
},
sex: {
required: true,
},
txtCard: {
required: true,
creditcard: true,
},
txtidcard: {
required: true,
idcard: true,
},
txtEmail: {
required: true,
email: true,
},
txtTel: {
required: true,
phone: true,
},
txtQQ: {
required: true,
qq: true,
},
txtUrl: {
required: true,
url: true,
},
txtZipCode: {
required: true,
zipcode: true
},
txtDate: {
required: true,
date: true,
},
txtISO: {
required: true,
dateISO: true,
},
filFile: {
required: true,
filetype: ["mp3", "wma", "wav"]
}
},
messages: {
txtUserName: {
required: "请输入登录名",
minlength: jQuery.format("登录名不能小于{0}个字符"),
rangelength: "长度必须介于{0} 和 {1} 之间的字符串",
remote: "登录名已存在",
},
txtPassword: {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{0}个字符"),
rangelength: "长度必须介于{0} 和 {1} 之间的字符串",
password: "密码只能是数字、字母与下划线"
},
txtPwd: {
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
rangelength: "长度必须介于{0} 和 {1} 之间的字符串",
equalTo: "两次输入密码不一致不一致",
password: "密码只能是数字、字母与下划线"
},
txtDisplayName: {
required: "请输入用户名",
minlength: jQuery.format("密码不能小于{0}个字符"),
rangelength: "长度必须介于{0} 和 {1} 之间的字符串",
},
txtAge: {
required: "请输入年龄",
digits: "只能输入数字",
min: "最小值是1",
max: "最大值是100"
},
sex: {
required: "请选择性别",
},
txtCard: {
required: "请输入信用卡",
creditcard: "请输入信用卡",
},
txtidcard: {
required: "请输入身份证号",
idcard: "身份证号格式不正确",
},
txtEmail: {
required: "请输入邮箱",
email: "邮箱格式不正确",
},
txtTel: {
required: "请输入手机",
phone: "手机格式不正确"
},
txtQQ: {
required: "请输入QQ",
qq: "qq格式不正确",
},
txtUrl: {
required: "请输入网址",
url: "请输入正确的网址",
},
txtZipCode: {
required: "请输入邮编",
zipcode: "邮编格式不正确"
},
txtDate: {
required: "请输入时间",
date: "日期格式不正确",
},
txtISO: {
required: "请输入ISO",
dateISO: "ISO格式错误"
},
filFile: {
required: "请选择文件",
filetype: "只能上传MP3,WMA,WAV格式文件",
}
},
submitHandler: function (form) {
//避免重复提交数据
$(form).find(":submit").attr("disabled", true);
form.submit();
},
//指定错误信息位置
errorPlacement: function (error, element) {
if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
var eid = element.attr('name'); //获取元素的name属性
error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面
} else {
error.insertAfter(element);
}
},
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<p>
<p>
<label>登录名：</label>
<input id="txtUserName" name="txtUserName" class="sf" type="text" value="" />
</p>
<p>
<label>密码：</label>
<input id="txtPassword" name="txtPassword" class="sf" type="password" value="" />
</p>
<p>
<label>确认密码：</label>
<input id="txtPwd" name="txtPwd" type="password" value="" class="sf" />
</p>
<p>
<label>用户名：</label>
<input id="txtDisplayName" name="txtDisplayName" class="mf" type="text" value="" />
</p>
<p>
<label>年龄：</label>
<input id="txtAge" name="txtAge" class="mf" type="text" value="" />
</p>
<p>
<label>性别：</label>
<input id="Radio1" type="radio" value="" name="sex" />男<input id="Radio2" type="radio" value="" name="sex" />女
</p>
<p>
<label>信用卡：</label>
<input id="txtCard" name="txtCard" class="sf" type="text" value="" />
</p>
<p>
<label>身份证：</label>
<input id="txtidcard" name="txtidcard" class="sf" type="text" value="" />
</p>
<p>
<label>邮箱：</label>
<input id="txtEmail" name="txtEmail" class="sf" type="text" value="" />
</p>
<p>
<label>手机：</label>
<input id="txtTel" name="txtTel" class="sf" type="text" value="" />
</p>
<p>
<label>QQ：</label>
<input id="txtQQ" name="txtQQ" class="sf" type="text" value="" />
</p>
<p>
<label>网址：</label>
<input id="txtUrl" name="txtUrl" class="sf" type="text" value="" />
</p>
<p>
<label>邮编：</label>
<input id="txtZipCode" name="txtZipCode" class="sf" type="text" value="" />
</p>
<p>
<label>时间：</label>
<input id="txtDate" name="txtDate" class="sf" type="text" value="" />
</p>
<p>
<label>ISO：</label>
<input id="txtISO" name="txtISO" class="sf" type="text" value="" />
</p>
<p>
<label>文件：</label>
<input id="filFile" name="filFile" type="file" />
</p>
</p>
<input id="Submit1" type="submit" value="submit" />
</form>
</body>
</html>
password: function (value, element) {
return this.optional(element) || /^\w+$/.test(value);
},
address: function (value, element) {
return this.optional(element) || /^[a-zA-Z0-9][a-zA-Z0-9\s]+$/.test(value);
},
///固定电话123-85611111 或 0311-8561111
phone: function (value, element) {
return this.optional(element) || /^\d{3}-\d{8}$|\d{4}-\d{7}$/.test(value);
},
///13866666666
telphone: function (value, element) {
return this.optional(element) || /^(\+86)|(86)?1[3,5,8]{1}[0-9]{1}[0-9]{8}$/.test(value)
},
mobilephone: function (value, element) {
return this.optional(element) || /^\d{3}-\d{8}$|\d3\d{8}$|\d{4}-\d{7}$|\d4\d{7}$|1[358]\d{9}$/.test(value);
},
//身份证号
idcard: function (value, element) {
return this.optional(element) || /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value);
},
///上传文件格式验证
filetype: function (value, element, param) {
var fileType = value.substring(value.lastIndexOf(".") + 1).toLowerCase();
return this.optional(element) || $.inArray(fileType, param) != -1;
},Related recommendations:
Solution to jquery.validate .js Validation processing for multiple names with the same name
jQuery Validate step-by-step practical tutorial
Recommended courses on Validate verification
The above is the detailed content of jQuery Validate format verification function example code sharing. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
