1.はじめに
私たちが行うために使用jQuery.validatorは、プラグインのフォーム検証を提出する際、あなたは直接ダウンロードする公式サイトに行くことができ、また、新人のチュートリアルでプラグインをダウンロードすることを学ぶことができますを与えることです
ルーキーのチュートリアル（jQuery.validator）
使用して2、
ダウンロードした後、2.1には対応するJSライブラリの完全な導入であります
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>2.2の導入後、デフォルトモードを設定し、JSファイルにjQuery.validatorをロード
$(document).ready(function(){
$.validator.setDefaults({
submitHandler: function(form) {
form.submit();
}
});
});エラーCSSタグ情報の2.3対が変更されます。
/** 表单验证 样式布局 */
label.error {
position: absolute;
right: 18px;
top: 5px;
color: #ef392b;
font-size: 12px;
z-index: 3;
}エラーが発生したときに、エラー要素、内部lableに書かれたエラーメッセージの後にlableラベルを付加され、私たちは見て変換より良いいただきたい、クラスはエラーが誤表示される（つまり、検証を通じて、ではない）、デフォルトのプロンプトラベルlableを使用します最適な設定のz-indexが高く、あなたは大きなを設定しない場合ので、我々はいくつかの他の入力スタイルのプラグインを積層することができる使用しているため、ブロックされ、見えなくすることができます。これはグローバルです。
あなたはまた、チューニング、例えば、私は効果の内側のdivのエラー入力を追加するクラスを調整したいことができますされていない場合ローカル
.append-input .error{
z-index: 3;
margin-right: 25px;
}
デフォルトの方法をロードした後、我々は確認することができます前に、と、コードを見て：2.4フォームデータを検証します
$("#form-customer-add").validate({
rules: {
loginAccountName: {
accountExtend: "autoCreatAccountAndPassword",
remote: {
url: ctx + "vip/customer/checkLoginAccount",
type: "post",
dataType: "json",
cache:false,
async:false,
data: {
loginAccountName: function () {
return $.trim($("#loginAccountName").val());
}
},
dataFilter: function (data, type) {
var result = JSON.parse(data);
if (result.code == 0) return true;
else return false;
}
}
},
password: {
passwordExtend:true,
required:true
},
nickname:{
required:true,
nicknameExtend:true
},
telephones:{
required:true,
telephoneExtend:true,
inputUniquenessExtend:["telephones","该手机号已经输入过了"],
checkUniquenessExtend:["telephone",ctx + "vip/customer/checkPhone","手机号已经存在"]
},
emails:{
emilExtend:true
},
trueName:{
chineseAndLetterExtend:true,
minlength:2
},
idNumber:{
idNumberExtend:true
},
company:{
numberExtend:"other"
},
job:{
numberExtend:"other"
},
income:{
numberExtend:true
},
homeAddress:{
numberExtend:"other",
letterExtend:"other"
}
},
messages: {
loginAccountName:{
remote:"该账户已经被注册"
}
},
errorPlacement:function(error,element) {
error.insertAfter(element);
},
submitHandler: function (form) {
add();
}
});
function add() {
var data = getFormDateReturnForm("form-customer-add");//得到表单数据
var avatarFile = $("input[name ='avatarFile']")[0].files[0];
data.append("avatarFile", avatarFile);
/*-------------------获得爱好-------------------------*/
var hobbyStr = $('#hobbys').val();//获取爱好的值
if(!isEmptyForString(hobbyStr)){
var hobbys = hobbyStr.split(",");//得到爱好数组
data.append("hobbys",hobbys);
}
/*-------------------获得车品牌/车系/车型---------------------------*/
var carsObj = $("span[name='cars']");
if(!isEmptyForObject(carsObj)){
var cars = new Array();
$("span[name='cars']").each(function(){
cars.push($(this).text());
});
data.append("cars",cars);
}
/*-------------------获得车牌---------------------------*/
var carLicensesObj = $("span[name='carLicensesSpan']");
if(!isEmptyForObject(carLicensesObj)){
var carLicenses = new Array();
$("span[name='carLicensesSpan']").each(function(){
cars.push($(this).text());
});
data.append("carLicenses",carLicenses);
}
$.ajax({
cache: true,
type: "POST",
url: ctx + "vip/customer/add",
data: data,
contentType: false,
processData: false,
mimeType: "multipart/form-data",
async: false,
error: function (request) {
$.modal.alertError("系统错误");
},
success: function (data) {
$.operate.saveSuccess(JSON.parse(data));
}
});
}コードは、我々は説明が長すぎる分割されます。
（1）
$("#form-customer-add").validate({この表現は、IDフォームのフォームをロードすることです
<form class="form-horizontal m" id="form-customer-add">（2）
$("#form-customer-add").validate({
rules: {ルールは、我々検証ルールがそこに書かれていることを意味し、リターン検証ルールの要素を意味し、
（3）
$("#form-customer-add").validate({
rules: {
loginAccountName: {loginAccountName値はjQuery.validator一致検証が一致する名前に基づいて行われ、説明、当社独自のフォーム要素の名前を表し
<div class="form-group">
<label class="col-sm-3 control-label ">用户账号：</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="loginAccountName" name="loginAccountName" placeholder="请填写用户账号"/>
</div>
</div>（4）
$("#form-customer-add").validate({
rules: {
loginAccountName: {
accountExtend: "autoCreatAccountAndPassword",
remote: {accountExtendは検証がプラグが提供する背景にリクエストを送信するために、当社独自の定義、リモート検証ルールをルール表し
（4.1）を使用すると、romote
remote: {
url: ctx + "vip/customer/checkLoginAccount",
type: "post",
dataType: "json",
cache:false,
async:false,
data: {
loginAccountName: function () {
return $.trim($("#loginAccountName").val());
}
},
dataFilter: function (data, type) {
var result = JSON.parse(data);
if (result.code == 0) return true;
else return false;
}
}この追加非同期を使用して、説明：偽の同期要求は、真を示すか、この属性なしで非同期要求を示します
データあなたは、パラメータの名前と背景値の明示受け入れの形での主要パラメータの内側に戻ってデータを渡したい、この値は、{loginAccountに似た背景を、渡したい値を返すメソッドです。 " test12345「}このフォーム
dataFileterはあなたが返す情報を表し、データを背景データから返され、独自の判断を行い、認証され、虚偽の表現は、エラーメッセージを確認されていない場合は最終的にこの関数はtrueを返します。
ここでは、直接反射されたメッセージには合格しないエラーメッセージ、ルールと同じレベルを検証する役割であります
このコードを見てください：
messages: {
loginAccountName:{
remote:"该账户已经被注册"
}
}メッセージ構造と内部ルール同様、無サブシーケンスである階層は、メッセージを選択的に指定されています
いくつかの検証方法は、プラグインが付属していますので、あなたがあなた自身のメッセージを使用したい場合は、あなたが直接そのように指定することができ、デフォルトのメッセージが含まれています
（4.2カスタム検証ルール）
カスタム検証ルール
すでに述べたようにaccountExtendは、検証ルールの私たち自身の定義です
カスタム検証ルールを呼び出す必要がありaddMethodの方法を
例えば：
jQuery.validator.addMethod("passwordExtend", function (value, element) {
var length = value.length;
return this.optional(element) || (FormVerifyRegEx.letterAndNumber.test(value) && length >= 8 && length <= 20);
}, "<i class='fa fa-times-circle'>密码必须为8-12位字母和数字组合</i>");第一引数：カスタムルールの名前
passwordExtendは、私たちがカスタムルールの名前を取っています
第二引数は、メソッド、最も重要な（三つのパラメータがあります）です。
値は、フォーカス入力ボックスの値を表し、私たちは、この値を確認したいです
要素は、現在の焦点ノード要素を表します
パラメータがあるのparamsマルチパラメータ配列は、[]、あなたがこれを書くことはできません使用して、あなたが渡されたことを示すパラメータは、それが直接パラメータを渡すために望んで書きます
第三のパラメータエラーメッセージを示す：このメッセージは、ここで書き込むことができないは動的で、それだけで死んだことができます
ヒント：内部メソッドがfalseを返す表現が検証されていない、本当の彼はライン上のリターンを確保するために、検証、社内ルールのメソッドを書くことが無料だったと評価しています
this.optional（要素）はヌル値で表すことができます
コール：着信コールがtrueにデフォルト設定されます、偽が呼び出されることはありません。彼らは空にすることはできません組み込みのバリデーションルールプラグインは、呼び出されません偽、真呼び出す必要である、あなたは書き込みも呼び出すことはありません
$("#form-customer-add").validate({
rules: {
password: {
passwordExtend:true,
required:true
}
}
)};
別の例を見てください：
/**
* 验证数字
* 传入true表示必须是数字，
* "false"输入内容不能包含数字,
* "other"表示是输入内容不能全是数字
*/
$.validator.addMethod("numberExtend", function (value, element, params) {
console.log(params);
if (params === true) {
$.validator.messages.numberExtend = "<i class='fa fa-times-circle'>输入内容必须是0-9数字</i>";
return this.optional(element) || (FormVerifyRegEx.number.test(value));
}else if(params === "false"){
var sign = true;
for(var i=0;i<value.length;i++){
if(FormVerifyRegEx.number.test(value.substr(i,1))){
$.validator.messages.numberExtend = "<i class='fa fa-times-circle'>输入内容不能包含数字</i>";
sign = false;
break;
}
}
return this.optional(element) || sign;
}
$.validator.messages.numberExtend = "<i class='fa fa-times-circle'>输入内容不能全是数字</i>";
return this.optional(element) || !(FormVerifyRegEx.number.test(value));
});これは説明し、別の方法です：
$ .Validator.messages.numberExtendは、あなたのように定義する状況下での動的な変更のエラーメッセージ、ここに名前のnumberExtendを支配すると、最初のパラメータを表し、
私は偽受信するために使用する理由を重要がある場合、あなたは「」を参照してくださいすることができますパスがfalseの場合、この検証ルールを呼び出すために行くので、あなたは、パラメータの他のタイプを記述する必要があり、真ので渡すことができていませんデフォルトの書き込みが真実を取得するには、この認証メソッドを呼び出すための手段
コール：
company:{
numberExtend:"other"
},
私はそれにいくつかの属性に書かれたラベルに、実際には、我々は基本的な構成は、説明し、終了しないであろう他の行にデフォルトで設定されていない、選択の上、ライン上のルーキーのチュートリアルを参照してくださいレディオ、について話すことは何も必要、あなたへの書き込み彼は参照を行ってきました
errorPlacement:function(error,element) {
error.insertAfter(element);
},
submitHandler: function (form) {
add();
}これはありません、errorPlacementそこでのエラーメッセージは、デフォルトでは、私がこれを書いていること、バックでの追加要素であるが、我々はそれを削除したい、これを指定する必要はありません、
submitHandlerすべての後で行われた検証機能を表し、我々は、この機能によってトリガされる検証を提出クリックすると、自動的にトリガされ、この関数の型のための送信ボタンをクリックし、
<button type="submit" class="btn btn-primary">提交</button>私たち自身のバックグラウンドを書き込むためのデータを送信するための方法がある（）を追加
説明：検証では、我々は上から下に実行された検証ルール内の同じ名前を書いて上記の検証に合格しないと、次の検証は、検証を進め検証上記を以下の続行されません検証
homeAddress:{
numberExtend:"other",
letterExtend:"other"
}次いでletterExtend検証を実行し、第一実施numberExtend検証、このように、検証規則は、すべて組み合わせて使用することができます
同じ名前の要素を解決するためにのみ最初の質問ことを確認してください
/**
* 解决jquery表单验证name值相同只验证第一个的问题
*/
$(function () {
function jqueryVerify() {
if ($.validator) {
$.validator.prototype.elements = function () {
var validator = this,
rulesCache = {};
// Select all valid inputs inside the form (no submit or reset buttons)
return $(this.currentForm)
.find("input, select, textarea, [contenteditable]")
.not(":submit, :reset, :image, :disabled")
.not(this.settings.ignore)
.filter(function () {
var name = this.id || this.name || $(this).attr("name"); // For contenteditable
if (!name && validator.settings.debug && window.console) {
console.error("%o has no name assigned", this);
}
// Set form expando on contenteditable
if (this.hasAttribute("contenteditable")) {
this.form = $(this).closest("form")[0];
}
// Select only the first element for each name, and only those with rules specified
if (name in rulesCache || !validator.objectLength($(this).rules())) {
return false;
}
rulesCache[name] = true;
return true;
});
}
}
}
jqueryVerify();
});
最後に福祉時間は、私はほとんどが直接使用することができ、完全な地上検証ルールを書きました：
common.js：一般jsが、一般的に使用される方法のいくつかを建て
//获得项目名称
function getPath() {
var pathName = window.document.location.pathname;
var projectName = pathName
.substring(0, pathName.substr(1).indexOf('/') + 1);
return projectName;
}
// 动态给Date对象添加新的方法
Date.prototype.formatDateTime = function() {
var y = this.getFullYear();
var m = this.getMonth() + 1;
var d = this.getDate();
var hh = this.getHours();
var mm = this.getMinutes();
var ss = this.getSeconds();
return y + "-" + formatNumber(m) + "-" + formatNumber(d) + " "
+ formatNumber(hh) + ":" + formatNumber(mm) + ":"
+ formatNumber(ss);
}
// 动态给Date对象添加新的方法
Date.prototype.formatDate = function() {
var y = this.getFullYear();
var m = this.getMonth() + 1;
var d = this.getDate();
return y + "-" + formatNumber(m) + "-" + formatNumber(d);
}
// 位数不够，就使用0补位
function formatNumber(value) {
if (value < 10) {
value = '0' + value;
}
return value;
}
/**
* 判断字符串是否为空
*
* @param string
* @returns
*/
function isEmptyForString(string) {
if (string === null || string === "" || string === undefined) {
return true;
}
return false;
}
/**
* 判断对象是否为空
*
* @param object
* @returns
*/
function isEmptyForObject(object) {
if (object === null || object === undefined) {
return true;
}
return false;
}
// 拿到表单中的数据，返回类对象
function getFormData(id) {
var d = {};
var t = $('#' + id).serializeArray();
$.each(t, function() {
d[this.name] = this.value;
});
return d;
}
//拿到表单中的数据，返回表单对象
function getFormDateReturnForm(id) {
var form = new FormData();
var t = $('#' + id).serializeArray();
$.each(t, function() {
form.append(this.name,this.value);
});
return form;
}
//重置表单,刷新表格数据
function formReset(formName){
document.getElementById(formName).reset();
$.table.search(formName);//我这里是用的bootstrap,所以这个是刷新表格的，上面的是重置表单
}
function getAge2Birth(str) {
var strBirthday = str.split(" ");
var returnAge;
var strBirthdayArr = strBirthday[0].split("-");
var birthYear = strBirthdayArr[0];
var birthMonth = strBirthdayArr[1];
var birthDay = strBirthdayArr[2];
d = new Date();
var nowYear = d.getFullYear();
var nowMonth = d.getMonth() + 1;
var nowDay = d.getDate();
if (nowYear == birthYear) {
returnAge = 0;// 同年 则为0岁
} else {
var ageDiff = nowYear - birthYear; // 年之差
if (ageDiff > 0) {
if (nowMonth == birthMonth) {
var dayDiff = nowDay - birthDay;// 日之差
if (dayDiff < 0) {
returnAge = ageDiff - 1;
} else {
returnAge = ageDiff;
}
} else {
var monthDiff = nowMonth - birthMonth;// 月之差
if (monthDiff < 0) {
returnAge = ageDiff - 1;
} else {
returnAge = ageDiff;
}
}
} else {
returnAge = -1;// 返回-1 表示出生日期输入错误 晚于今天
}
}
return returnAge;// 返回周岁年龄
}
function getDate(dateStr){
var str = dateStr.split(" ");
var strArr = str[0].split("-");
var Year = strArr[0];
var Month = strArr[1];
var Day = strArr[2];
return new Date(Year,Month,Day);
}
function getNowDate(){
d = new Date();
var nowYear = d.getFullYear();
var nowMonth = d.getMonth() + 1;
var nowDay = d.getDate();
return nowYear + "-" + formatNumber(nowMonth) + "-" + formatNumber(nowDay);
}
/* min<=取值<=max*/
function getRandomNum(min,max)
{
var Range = max - min;
var Rand = Math.random();
return (min + Math.round(Rand * Range));
}
カスタム検証ルール：フォームverify.js
/**
* 定义正则表达式验证规则
* @type {{plane: RegExp, electricVehicleLicence: RegExp, idCard: RegExp, licencePlate: RegExp, telephone: RegExp, url: RegExp, chinese: RegExp, number: RegExp, dateIso: RegExp, chineseAndLetterAndNumber: RegExp, letterAndNumber: RegExp, letter: RegExp, email: RegExp}}
*/
var FormVerifyRegEx = {
//匹配中文
chinese: /^[\u4e00-\u9fa5]{0,}$/,
//匹配字母
letter: /^[a-zA-Z]*$/,
//匹配数字
number: /^[0-9]*$/,
//匹配字母和数字
letterAndNumber: /^[a-zA-Z0-9]*$/,
//匹配中文和字母
chineseAndLetter: /^[\u4e00-\u9fa5a-zA-Z]+$/,
//匹配中文字母和数字
chineseAndLetterAndNumber: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/,
//匹配中文字母数字和下划线
chineseAndLetterAndNumberAndUnder: /^[\u4e00-\u9fa5a-zA-Z0-9_]+$/,
//匹配中文字母数字和下划线和短横线
chineseAndLetterAndNumberAndLine:/^[\u4e00-\u9fa5a-zA-Z0-9_\-]+$/,
//匹配手机号
telephone: /^1[34578]\d{9}$/,
//匹配座机号
plane: /^(0\d{2,3}-)?\d{7,8}$/g,
//匹配电子邮箱
email: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,
//匹配身份证
idCard: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
//匹配传统汽车牌照
licencePlate: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/,
//匹配电动车牌照
electricVehicleLicence: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/,
//匹配url
url: /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i,
//匹配日期格式(yy-MM-dd)
dateIso: /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/
};
/**
* 向jquery表单验证追加验证方法
*/
$(function () {
/**
* 验证6-12位账号
* 传入true,表示开启验证
*/
jQuery.validator.addMethod("accountExtend", function (value, element, params) {
var length = value.length;
return (FormVerifyRegEx.letterAndNumber.test(value) && length >= 6 && length <= 12);
}, "<i class='fa fa-times-circle'>账号必须为6-12位字母和数字组合</i>");
/**
* 验证密码
* 传入true,表示开启验证
*/
jQuery.validator.addMethod("passwordExtend", function (value, element) {
var length = value.length;
return this.optional(element) || (FormVerifyRegEx.letterAndNumber.test(value) && length >= 8 && length <= 20);
}, "<i class='fa fa-times-circle'>密码必须为8-12位字母和数字组合</i>");
/**
* 验证昵称
* 传入true,表示开启验证
*/
jQuery.validator.addMethod("nicknameExtend", function (value, element) {
var chineseAndOtherLength = 0;
var numberAndLetter = 0;
for(var i=0;i<value.length;i++){
if(FormVerifyRegEx.number.test(value.substr(i,1)) || FormVerifyRegEx.letter.test(value.substr(i,1))){
numberAndLetter++;
}else {
chineseAndOtherLength++;
}
}
var length = chineseAndOtherLength + numberAndLetter/2;
return this.optional(element) || (length >= 1 && length <=20);
}, "<i class='fa fa-times-circle'>昵称必须在1-20个中文，1个符号相当于1个中文，2个数字/英文相当于1个中文</i>");
/**
* 验证汽车牌照
* 传入true,表示开启验证
*/
jQuery.validator.addMethod("licenceExtend", function (value, element) {
var length = value.length;
return this.optional(element) || (FormVerifyRegEx.licencePlate.test(value)) || (FormVerifyRegEx.electricVehicleLicence.test(value));
}, "<i class='fa fa-times-circle'>汽车牌照格式输入错误</i>");
/**
* 验证数字
* 传入true表示必须是数字，
* "false"输入内容不能包含数字,
* "other"表示是输入内容不能全是数字
*/
$.validator.addMethod("numberExtend", function (value, element, params) {
console.log(params);
if (params === true) {
$.validator.messages.numberExtend = "<i class='fa fa-times-circle'>输入内容必须是0-9数字</i>";
return this.optional(element) || (FormVerifyRegEx.number.test(value));
}else if(params === "false"){
var sign = true;
for(var i=0;i<value.length;i++){
if(FormVerifyRegEx.number.test(value.substr(i,1))){
$.validator.messages.numberExtend = "<i class='fa fa-times-circle'>输入内容不能包含数字</i>";
sign = false;
break;
}
}
return this.optional(element) || sign;
}
$.validator.messages.numberExtend = "<i class='fa fa-times-circle'>输入内容不能全是数字</i>";
return this.optional(element) || !(FormVerifyRegEx.number.test(value));
});
/**
* 验证中文
* 传入true表示必须是中文，
* "false" 表示是输入内容不能包含中文,
* "other" 表示是输入内容不能全是中文
*/
$.validator.addMethod("chineseExtend", function (value, element, params) {
if (params === true) {
$.validator.messages.chineseExtend = "<i class='fa fa-times-circle'>输入内容必须是中文</i>";
return this.optional(element) || (FormVerifyRegEx.chinese.test(value));
}else if(params === "false"){
var sign = true;
for(var i=0;i<value.length;i++){
if(FormVerifyRegEx.chinese.test(value.substr(i,1))){
$.validator.messages.chineseExtend = "<i class='fa fa-times-circle'>输入内容不能包含中文</i>";
sign = false;
break;
}
}
return this.optional(element) || sign;
}
$.validator.messages.chineseExtend = "<i class='fa fa-times-circle'>输入内容不能全是中文</i>";
return this.optional(element) || !(FormVerifyRegEx.chinese.test(value));
});
/**
* 验证英文字母
* 传入true表示必须是字母，
* "false"表示输入内容不能包含英文字母，
* "other"表示输入内容不能是纯字母
*/
$.validator.addMethod("letterExtend", function (value, element, params) {
if (params === true) {
$.validator.messages.letterExtend = "<i class='fa fa-times-circle'>输入内容必须是英文字母</i>";
return this.optional(element) || (FormVerifyRegEx.letter.test(value));
}else if(params === "false"){
var sign = true;
for(var i=0;i<value.length;i++){
if(FormVerifyRegEx.letter.test(value.substr(i,1))){
$.validator.messages.letterExtend = "<i class='fa fa-times-circle'>输入内容不能包含英文字母</i>";
sign = false;
break;
}
}
return this.optional(element) || sign;
}
$.validator.messages.letterExtend = "<i class='fa fa-times-circle'>输入内容不能全是英文字母</i>";
return this.optional(element) || !(FormVerifyRegEx.letter.test(value));
});
/**
* 验证字母、数字
* 传入true表示必须是字母、数字，
* "false"表示输入内容不能包含数字或字母，
* "other" 表示是输入内容除了包含数字或字母，还必须包含额外字符
*/
$.validator.addMethod("letterAndNumberExtend", function (value, element, params) {
if (params === true) {
$.validator.messages.letterAndNumberExtend = "<i class='fa fa-times-circle'>输入内容必须是字母、数字</i>";
return this.optional(element) || (FormVerifyRegEx.letterAndNumber.test(value));
}else if(params === "false"){
var sign = true;
for(var i=0;i<value.length;i++){
if(FormVerifyRegEx.letterAndNumber.test(value.substr(i,1))){
$.validator.messages.letterAndNumberExtend = "<i class='fa fa-times-circle'>输入内容不能包含数字或字母</i>";
sign = false;
break;
}
}
return this.optional(element) || sign;
}
$.validator.messages.letterAndNumberExtend = "<i class='fa fa-times-circle'>输入内容除了包含数字或字母，还必须包含额外字符</i>";
return this.optional(element) || !(FormVerifyRegEx.letterAndNumber.test(value));
});
/**
* 验证字母、中文
* 传入true表示必须是字母、中文，
* "false"表示输入内容不能包含字母或中文，
* "other"表示是除了包含字母或中文，还必须包含额外字符
*/
$.validator.addMethod("chineseAndLetterExtend", function (value, element, params) {
if (params === true) {
$.validator.messages.chineseAndLetterExtend = "<i class='fa fa-times-circle'>输入内容必须是字母、中文</i>";
return this.optional(element) || (FormVerifyRegEx.chineseAndLetter.test(value));
}else if(params === "false"){
var sign = true;
for(var i=0;i<value.length;i++){
if(FormVerifyRegEx.chineseAndLetter.test(value.substr(i,1))){
$.validator.messages.chineseAndLetterExtend = "<i class='fa fa-times-circle'>输入内容不能包含字母或中文</i>";
sign = false;
break;
}
}
return this.optional(element) || sign;
}
$.validator.messages.chineseAndLetterExtend = "<i class='fa fa-times-circle'>输入内容除了包含字母或中文，还必须包含额外字符</i>";
return this.optional(element) || !(FormVerifyRegEx.chineseAndLetter.test(value));
});
/**
* 验证字母、数字、中文
* 传入true表示必须是字母、数字、中文，
* "false"表示输入内容不能包含字母、数字或中文，
* "other"表示是除了包含字母、数字或中文，还必须包含额外字符
*/
$.validator.addMethod("chineseAndLetterAndNumberExtend", function (value, element, params) {
if (params === true) {
$.validator.messages.chineseAndLetterAndNumberExtend = "<i class='fa fa-times-circle'>输入内容必须是字母、数字、中文</i>";
return this.optional(element) || (FormVerifyRegEx.chineseAndLetterAndNumber.test(value));
}else if(params === "false"){
var sign = true;
for(var i=0;i<value.length;i++){
if(FormVerifyRegEx.chineseAndLetterAndNumber.test(value.substr(i,1))){
$.validator.messages.chineseAndLetterAndNumberExtend = "<i class='fa fa-times-circle'>输入内容不能包含字母、数字或中文</i>";
sign = false;
break;
}
}
return this.optional(element) || sign;
}
$.validator.messages.chineseAndLetterAndNumberExtend = "<i class='fa fa-times-circle'>输入内容除了包含字母、数字或中文，还必须包含额外字符</i>";
return this.optional(element) || !(FormVerifyRegEx.chineseAndLetterAndNumber.test(value));
});
/**
* 验证字母、数字、中文、下划线
* 传入true表示必须是字母、数字、中文，
* "false"表示输入内容不能包含字母、数字、中文或下划线，
* "other"表示是除了包含字母、数字、中文或下划线，还必须包含额外字符
*/
$.validator.addMethod("chineseAndLetterAndNumberAndUnderExtend", function (value, element, params) {
if (params === true) {
$.validator.messages.chineseAndLetterAndNumberAndUnderExtend = "<i class='fa fa-times-circle'>输入内容必须是字母、数字、中文、下划线</i>";
return this.optional(element) || (FormVerifyRegEx.chineseAndLetterAndNumberAndUnder.test(value));
}else if(params === "false"){
var sign = true;
for(var i=0;i<value.length;i++){
if(FormVerifyRegEx.chineseAndLetterAndNumberAndUnder.test(value.substr(i,1))){
$.validator.messages.chineseAndLetterAndNumberAndUnderExtend = "<i class='fa fa-times-circle'>输入内容不能包含字母、数字、中文或下划线</i>";
sign = false;
break;
}
}
return this.optional(element) || sign;
}
$.validator.messages.chineseAndLetterAndNumberAndUnderExtend = "<i class='fa fa-times-circle'>输入内容除了包含字母、数字、中文或下划线，还必须包含额外字符</i>";
return this.optional(element) || !(FormVerifyRegEx.chineseAndLetterAndNumberAndUnder.test(value));
});
/**
* 验证字母、数字、中文、下划线、短横线
* 传入true表示必须是字母、数字、中文、短横线，
* "false"表示输入内容不能包含字母、数字、中文、下划线或短横线，
* "other"表示是除了包含字母、数字、中文、下划线或短横线，还必须包含额外字符
*/
$.validator.addMethod("chineseAndLetterAndNumberAndLineExtend", function (value, element, params) {
if (params === true) {
$.validator.messages.chineseAndLetterAndNumberAndLineExtend = "<i class='fa fa-times-circle'>输入内容必须是字母、数字、中文、下划线、短横线</i>";
return this.optional(element) || (FormVerifyRegEx.chineseAndLetterAndNumberAndLine.test(value));
}else if(params === "false"){
var sign = true;
for(var i=0;i<value.length;i++){
if(FormVerifyRegEx.chineseAndLetterAndNumberAndLine.test(value.substr(i,1))){
$.validator.messages.chineseAndLetterAndNumberAndLineExtend = "<i class='fa fa-times-circle'>输入内容不能包含字母、数字、中文、下划线或短横线</i>";
sign = false;
break;
}
}
return this.optional(element) || sign;
}
$.validator.messages.chineseAndLetterAndNumberAndLineExtend = "<i class='fa fa-times-circle'>输入内容除了包含字母、数字、中文、下划线或短横线，还必须包含额外字符</i>";
return this.optional(element) || !(FormVerifyRegEx.chineseAndLetterAndNumberAndLine.test(value));
});
/**
* 验证身份证
* 传入参数为true，即开启验证
*/
jQuery.validator.addMethod("idNumberExtend", function (value, element) {
var length = value.length;
return this.optional(element) || (FormVerifyRegEx.idCard.test(value));
}, "<i class='fa fa-times-circle'>身份证件号输入格式有误</i>");
/**
* 验证邮箱
* 传入参数为true，即开启验证
*/
jQuery.validator.addMethod("emilExtend", function (value, element) {
var length = value.length;
return this.optional(element) || (FormVerifyRegEx.email.test(value));
}, "<i class='fa fa-times-circle'>邮箱格式输入错误</i>");
/**
* 验证手机号码
* 传入参数为true，即开启验证
*/
jQuery.validator.addMethod("telephoneExtend", function (value, element) {
return this.optional(element) || (FormVerifyRegEx.telephone.test(value))
}, "<i class='fa fa-times-circle'>请输入正确的11位有效手机号码</i>");
/**
* 验证座机号码
* 传入参数为true，即开启验证
*/
jQuery.validator.addMethod("planeExtend", function (value, element) {
return this.optional(element) || (FormVerifyRegEx.plane.test(value))
}, "<i class='fa fa-times-circle'>请输入正确的8位有效座机号码</i>");
/**
* 验证url地址
* 传入参数为true，即开启验证
*/
jQuery.validator.addMethod("urlExtend", function (value, element) {
return this.optional(element) || (FormVerifyRegEx.url.test(value))
}, "<i class='fa fa-times-circle'>请输入正确的URL地址链接</i>");
/**
* 验证时间格式为yy-MM-dd
* 传入参数为true，即开启验证
*/
jQuery.validator.addMethod("dateExtend", function (value, element) {
return this.optional(element) || (FormVerifyRegEx.dateIso.test(value))
}, "<i class='fa fa-times-circle'>请输入格式为yy-MM-dd</i>");
/**
* 后台检测唯一性
* 传入参数params为数组，第一个参数是传到后台的名字，第二个是url地址，第三个为错误提示信息
* 格式为：checkUniquenessExtend:["telephone",ctx + "vip/customer/checkPhone","手机号已经存在"]这种
*/
jQuery.validator.addMethod("checkUniquenessExtend", function (value, element,params) {
if(isEmptyForString(value)){
return this.optional(element);
}
if(isEmptyForObject(params) || params.length <3){
return this.optional(element);
}
var data = {};
data[params[0]] = value.trim();
var isUniqueness = true;
$.ajax({
type: "POST",
url: params[1],
data: data,
async: false,
success: function(result){
//这个是后台传过来的数据，code=0，表示没有找到相同数据，也就是唯一的，
//这个需要根据你自己的返回来判定，记住如果后台没有找到数据就说明了唯一性，那么这里isUniqueness就要赋值为true，表示通过验证
if (result.code === 0){
isUniqueness = true;
}else {
isUniqueness = false;
$.validator.messages.checkUniquenessExtend = "<i class='fa fa-times-circle'>"+params[2]+"</i>";
}
},
error:function () {
$.validator.messages.checkUniquenessExtend = "提交数据出错";
}
});
return this.optional(element) || isUniqueness;
});
/**
* 校验输入唯一性，相同name数据，校验是否已经输入
* 传入格式：第一个传入值为相同name元素的name值，第二个为错误信息提示
* 例子：inputUniquenessExtend:["telephones","该手机号已经输入过了"]
*/
jQuery.validator.addMethod("inputUniquenessExtend", function (value,element,params) {
if(isEmptyForString(value)){
return this.optional(element);
}
if(isEmptyForObject(params) || params.length <2){
return this.optional(element);
}
var isUniqueness = true;
var obj = $("input[name ='"+params[0]+"']");
if(!isEmptyForObject(obj) && obj.length >1){
$("input[name='"+params[0]+"']").each(function(){
if(value === $(this).val() && element.id != $(this).attr("id")){
isUniqueness = false;
$.validator.messages.inputUniquenessExtend = "<i class='fa fa-times-circle'>"+params[1]+"</i>";
return false;
}
});
}
return this.optional(element) || isUniqueness;
});
});
/**
* 解决jquery表单验证name值相同只验证第一个的问题
*/
$(function () {
function jqueryVerify() {
if ($.validator) {
$.validator.prototype.elements = function () {
var validator = this,
rulesCache = {};
// Select all valid inputs inside the form (no submit or reset buttons)
return $(this.currentForm)
.find("input, select, textarea, [contenteditable]")
.not(":submit, :reset, :image, :disabled")
.not(this.settings.ignore)
.filter(function () {
var name = this.id || this.name || $(this).attr("name"); // For contenteditable
if (!name && validator.settings.debug && window.console) {
console.error("%o has no name assigned", this);
}
// Set form expando on contenteditable
if (this.hasAttribute("contenteditable")) {
this.form = $(this).closest("form")[0];
}
// Select only the first element for each name, and only those with rules specified
if (name in rulesCache || !validator.objectLength($(this).rules())) {
return false;
}
rulesCache[name] = true;
return true;
});
}
}
}
jqueryVerify();
});
/* jQuery.validator()内置方法
* required() Boolean 必填验证元素。
required(dependency-expression) Boolean 必填元素依赖于表达式的结果。
required(dependency-callback) Boolean 必填元素依赖于回调函数的结果。
remote(url) Boolean 请求远程校验。url 通常是一个远程调用方法。
minlength(length) Boolean 设置最小长度。
maxlength(length) Boolean 设置最大长度。
rangelength(range) Boolean 设置一个长度范围 [min,max]。
min(value) Boolean 设置最小值。
max(value) Boolean 设置最大值。
email() Boolean 验证电子邮箱格式。
range(range) Boolean 设置值的范围。
url() Boolean 验证 URL 格式。
date() Boolean 验证日期格式（类似 30/30/2008 的格式，不验证日期准确性只验证格式）。
dateISO() Boolean 验证 ISO 类型的日期格式。
dateDE() Boolean 验证德式的日期格式（29.04.1994 或 1.1.2006）。
number() Boolean 验证十进制数字（包括小数的）。
digits() Boolean 验证整数。
creditcard() Boolean 验证信用卡号。
accept(extension) Boolean 验证相同后缀名的字符串。
equalTo(other) Boolean 验证两个输入框的内容是否相同。
phoneUS() Boolean 验证美式的电话号码。
*
* */
直接使用、および上記common.jsにフォームverify.js common.js導入します
ここでは、メッセージとポジショニングの方法である：レイヤーを使用する必要性は、あなたが必要として見ることができます
/**
* 提示信息及定位方法,验证框架这个是没用的，如果你自己写验证，不用这个插件，那么错误提示定位可以用这个，必须引入layer
* @param msg 显示的提示信息
* @param idName 要定位的元素id
* @param time 提示层显示时间
* @param slideTime 滑动到错误地点时间
*/
function tips(msg, idName, time, slideTime) {
layer.tips(msg, '#' + idName, {
tips: [1, '#3595CC'],
time: time
});
$("html,body").animate({scrollTop: $("#" + idName).offset().top}, slideTime);
}効果：
