jQuery Validate格式验证功能实例代码（包括重名验证）
程序员文章站
2023-02-24 10:30:02
引入jquery-1.7.1.js和jquery.validate.js两个js文件
jquery.validate.js下载地址：
引入jquery-1.7.1.js和jquery.validate.js两个js文件
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">
<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格式验证实例代码，希望对大家有所帮助
下一篇： JS原生带小白点轮播图实例讲解