jQuery Validate格式验证功能实例代码（包括重名验证）

更新时间：2020-05-25 13:18:01 作者：startmvc

引入jQuery-1.7.1.js和jquery.validate.js两个js文件jquery.validate.js下载地址：http://xiazai.jb51.net/201703/y

引入jQuery-1.7.1.js和jquery.validate.js两个js文件

jquery.validate.js下载地址：http://xiazai.jb51.net/201703/yuanma/jquery.validate.rar


<!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"> 
 <div> 
 <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> 
 </div> 
 <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; 
 },

总结

以上所述是小编给大家介绍的jQuery Validate格式验证实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！