Heim > Artikel > Web-Frontend > Beispiel für die Codefreigabe der jQuery Validate-Formatüberprüfungsfunktion
Beispiel für die Codefreigabe der jQuery Validate-Formatüberprüfungsfunktion
- 小云云Original
- 2017-12-31 16:50:251224Durchsuche
In diesem Artikel wird jedem die Funktion zur Überprüfung des jQuery-Validierungsformats vorgestellt. Der Code enthält die Methode zur Überprüfung doppelter Namen. Ich hoffe, dass er allen helfen kann.
Führen Sie zwei js-Dateien ein: jQuery-1.7.1.js und 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;
},Verwandte Empfehlungen:
Lösen Sie jquery. validieren.js Validierungsverarbeitung für mehrere Namen mit demselben Namen
JQuery Validate Schritt-für-Schritt-Praxisanleitung
Empfohlene Kurse zur Validate-Verifizierung
Das obige ist der detaillierte Inhalt vonBeispiel für die Codefreigabe der jQuery Validate-Formatüberprüfungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Teilen Sie die Verwendung des Plug-Ins zum asynchronen Hochladen von Dateien mithilfe von jQueryNächster Artikel：Teilen Sie die Verwendung des Plug-Ins zum asynchronen Hochladen von Dateien mithilfe von jQuery
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse