1.案例

?

1.1 Html form表單內(nèi)容

<form class="cForm" id="cForm" method="post" action=""> <p> <label for="user">用戶名</label> <input id="user" name="user" required minlength="3"> </p> <p> <label for="password">密碼</label> <input id="password" type="password" maxlength="12" name="password"> </p> <p> <input class="submit" type="submit" value="登錄"> </p> </form>

?

1.2 js代碼（進(jìn)行表單自驗(yàn)證）

<script>$().ready(function() {$("#cForm").validate({onsubmit:true,// 是否在提交是驗(yàn)證onfocusout:false,// 是否在獲取焦點(diǎn)時(shí)驗(yàn)證onkeyup :false,// 是否在敲擊鍵盤時(shí)驗(yàn)證 rules: {　　　　//規(guī)則user: {　　//要對(duì)應(yīng)相對(duì)應(yīng)的input中的name屬性required: true},password: {required: true} }, messages:{　　　　//驗(yàn)證錯(cuò)誤信息 　　user: {required: "請(qǐng)輸入用戶名"},password: {required: "請(qǐng)輸入密碼"} }, submitHandler: function(form) { //通過之后回調(diào) //進(jìn)行ajax傳值 $.ajax({url : "{:U('user/index')}",type : "post",dataType : "json",data: {user: $("#user").val(),password: $("#password").val() },success : function(msg) {//要執(zhí)行的代碼 　　} }); }, invalidHandler: function(form, validator) {return false;} }); });</script>

?

1.3在控制器中對(duì)ajax傳遞的數(shù)據(jù)進(jìn)行處理

? ? ?把a(bǔ)jax傳到控制器中的數(shù)據(jù)進(jìn)行處理，返回結(jié)果。

?

1.4效果展示

　　

?

?

?

2.validate的一些驗(yàn)證參數(shù)

?

2.1使用表單自驗(yàn)證可以通過導(dǎo)入js庫(kù)

<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>

可在官網(wǎng)進(jìn)行下載

?

默認(rèn)的校驗(yàn)規(guī)則

序號(hào) 規(guī)則 描述

1	required:true	必須輸入的字段。
2	remote:"check.php"	使用 ajax 方法調(diào)用 check.php 驗(yàn)證輸入值。
3	email:true	必須輸入正確格式的電子郵件。
4	url:true	必須輸入正確格式的網(wǎng)址。
5	date:true	必須輸入正確格式的日期。日期校驗(yàn) ie6 出錯(cuò)，慎用。
6	dateISO:true	必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗(yàn)證格式，不驗(yàn)證有效性。
7	number:true	必須輸入合法的數(shù)字（負(fù)數(shù)，小數(shù)）。
8	digits:true	必須輸入整數(shù)。
9	creditcard:	必須輸入合法的信用卡號(hào)。
10	equalTo:"#field"	輸入值必須和 #field 相同。
11	accept:	輸入擁有合法后綴名的字符串（上傳文件的后綴）。
12	maxlength:5	輸入長(zhǎng)度最多是 5 的字符串（漢字算一個(gè)字符）。
13	minlength:10	輸入長(zhǎng)度最小是 10 的字符串（漢字算一個(gè)字符）。
14	rangelength:[5,10]	輸入長(zhǎng)度必須介于 5 和 10 之間的字符串（漢字算一個(gè)字符）。
15	range:[5,10]	輸入值必須介于 5 和 10 之間。
16	max:5	輸入值不能大于 5。
17	min:10	輸入值不能小于 10。

?

2.2將校驗(yàn)規(guī)則寫到 js 代碼中

就像我上面寫的例子，直接把驗(yàn)證規(guī)則和提示信息寫在js代碼中

$().ready(function() { // 在鍵盤按下并釋放及提交后驗(yàn)證提交表單$("#signupForm").validate({rules: {firstname: "required",lastname: "required",username: {required: true,minlength: 2},password: {required: true,minlength: 5},confirm_password: {required: true,minlength: 5,equalTo: "#password"},email: {required: true,email: true},topic: {required: "#newsletter:checked",minlength: 2},agree: "required"},messages: {firstname: "請(qǐng)輸入您的名字",lastname: "請(qǐng)輸入您的姓氏",username: {required: "請(qǐng)輸入用戶名",minlength: "用戶名必需由兩個(gè)字母組成"},password: {required: "請(qǐng)輸入密碼",minlength: "密碼長(zhǎng)度不能小于 5 個(gè)字母"},confirm_password: {required: "請(qǐng)輸入密碼",minlength: "密碼長(zhǎng)度不能小于 5 個(gè)字母",equalTo: "兩次密碼輸入不一致"},email: "請(qǐng)輸入一個(gè)正確的郵箱",agree: "請(qǐng)接受我們的聲明",topic: "請(qǐng)選擇兩個(gè)主題"} });

?校驗(yàn)規(guī)則中的名字必須與input中的name值對(duì)應(yīng)

?

2.3常用方法及注意問題

?

2.3.1我們可以用其他方式替代默認(rèn)的 submit

$().ready(function() {$("#signupForm").validate({submitHandler:function(form){ //表單提交后要執(zhí)行的內(nèi)容 form.submit();} }); });

　　使用ajax ? //跟我上面的ajax傳值差不多

$(".selector").validate({ submitHandler: function(form) { $(form).ajaxSubmit(); } })

?

2.3.2debug，只驗(yàn)證不提交表單

$().ready(function() {$("#signupForm").validate({debug:true}); });

如果一個(gè)頁(yè)面中有多個(gè)表單都想設(shè)置成為 debug，則使用：

$.validator.setDefaults({debug: true })

?

2.3.3ignore：忽略某些元素不驗(yàn)證

ignore: ".ignore"

?

2.3.4更改錯(cuò)誤信息顯示的位置

errorPlacement：Callback

指明錯(cuò)誤放置的位置，默認(rèn)情況是：error.appendTo(element.parent());即把錯(cuò)誤信息放在驗(yàn)證的元素后面。

errorPlacement: function(error, element) { error.appendTo(element.parent()); }

?

2.3.5更改錯(cuò)誤信息顯示的樣式

設(shè)置錯(cuò)誤提示的樣式，可以增加圖標(biāo)顯示，在該系統(tǒng)中已經(jīng)建立了一個(gè) validation.css，專門用于維護(hù)校驗(yàn)文件的樣式。

input.error { border: 1px solid red; } label.error {background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;padding-left: 16px;padding-bottom: 2px;font-weight: bold;color: #EA5200; } label.checked {background:url("./demo/images/checked.gif") no-repeat 0px 0px; }

?

2.3.6每個(gè)字段驗(yàn)證通過執(zhí)行函數(shù)

success: function(label) {// set &nbsp; as text for IElabel.html("&nbsp;").addClass("checked");//label.addClass("valid").text("Ok!") }

?

2.3.7驗(yàn)證的觸發(fā)方式修改

觸發(fā)方式 類型 描述 默認(rèn)值

onsubmit	Boolean	提交時(shí)驗(yàn)證。設(shè)置為 false 就用其他方法去驗(yàn)證。	true
onfocusout	Boolean	失去焦點(diǎn)時(shí)驗(yàn)證（不包括復(fù)選框/單選按鈕）。	true
onkeyup	Boolean	在 keyup 時(shí)驗(yàn)證。	true
onclick	Boolean	在點(diǎn)擊復(fù)選框和單選按鈕時(shí)驗(yàn)證。	true
focusInvalid	Boolean	提交表單后，未通過驗(yàn)證的表單（第一個(gè)或提交之前獲得焦點(diǎn)的未通過驗(yàn)證的表單）會(huì)獲得焦點(diǎn)。	true
focusCleanup	Boolean	如果是 true 那么當(dāng)未通過驗(yàn)證的元素獲得焦點(diǎn)時(shí)，移除錯(cuò)誤提示。避免和 focusInvalid 一起用。	false

?重置表單 很實(shí)用
$().ready(function() {var validator = $("#signupForm").validate({submitHandler:function(form){alert("submitted"); form.submit();} });$("#reset").click(function() {validator.resetForm();});});

?

2.3.8異步驗(yàn)證

使用 ajax 方式進(jìn)行驗(yàn)證，默認(rèn)會(huì)提交當(dāng)前驗(yàn)證的值到遠(yuǎn)程地址，如果需要提交其他的值，可以使用 data 選項(xiàng)。

remote: {url: "check-email.php", //后臺(tái)處理程序type: "post", //數(shù)據(jù)發(fā)送方式dataType: "json", //接受數(shù)據(jù)格式 data: { //要傳遞的數(shù)據(jù)username: function() {return $("#username").val();}} }

?

2.3.9添加自定義校驗(yàn)

addMethod：name, method, message

自定義驗(yàn)證方法

// 中文字兩個(gè)字節(jié) jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {var length = value.length;for(var i = 0; i < value.length; i++){if(value.charCodeAt(i) > 127){length++;}}return this.optional(element) || ( length >= param[0] && length <= param[1] ); }, $.validator.format("請(qǐng)確保輸入的值在{0}-{1}個(gè)字節(jié)之間(一個(gè)中文字算2個(gè)字節(jié))"));// 郵政編碼驗(yàn)證 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/;return this.optional(element) || (tel.test(value)); }, "請(qǐng)正確填寫您的郵政編碼");

?

2.3.10radio 和 checkbox、select 的驗(yàn)證

?

列舉一個(gè)demo統(tǒng)一驗(yàn)證一下

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Validate radio（單選按鈕）、checkbox（復(fù)選按鈕）和 select（下拉框）</title><link rel="stylesheet" media="screen" href="http://static.runoob.com/assets/jquery-validation-1.14.0/demo/css/screen.css"> <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> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script><style> .block { display: block; } form.cmxform label.error { display: none; } </style></head> <body><div id="main"><form class="cmxform" id="form1" method="get" action=""><fieldset><legend>通過 radio（單選按鈕）和 checkbox（復(fù)選按鈕）驗(yàn)證表單</legend><fieldset><legend>性別</legend><label for="gender_male"><input type="radio" id="gender_male" value="m" name="gender" required>男性</label><label for="gender_female"><input type="radio" id="gender_female" value="f" name="gender">女性</label><label for="gender" class="error">請(qǐng)選擇您的性別。</label></fieldset><fieldset><legend>婚姻狀況</legend><label for="family_single"><input type="radio" id="family_single" value="s" name="family" required>單身</label><label for="family_married"><input type="radio" id="family_married" value="m" name="family">已婚</label><label for="family_other"><input type="radio" id="family_other" value="o" name="family">其他</label><label for="family" class="error">您選擇您的婚姻狀況。</label></fieldset><p><label for="agree">請(qǐng)同意我們的條款</label><input type="checkbox" class="checkbox" id="agree" name="agree" required><br><label for="agree" class="error block">請(qǐng)同意我們的條款！</label></p><fieldset><legend>垃圾郵件</legend><label for="spam_email"><input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2">垃圾郵件 - E-Mail</label><label for="spam_phone"><input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]">垃圾郵件 - Phone</label><label for="spam_mail"><input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]">垃圾郵件 - Mail</label><label for="spam[]" class="error">請(qǐng)選擇至少兩種類型的垃圾郵件。</label></fieldset><p><input class="submit" type="submit" value="提交"></p></fieldset> </form><form id="selecttest"><h2>一些關(guān)于 select 的測(cè)試</h2><p><label for="jungle">請(qǐng)選擇一個(gè)叢林名詞</label><br><select id="jungle" name="jungle" title="請(qǐng)選擇一個(gè)叢林名詞！" required><option value=""></option><option value="1">Buga</option><option value="2">Baga</option><option value="3">Oi</option></select></p><p><label for="fruit">請(qǐng)選擇至少兩種水果</label><br><select id="fruit" name="fruit" title="請(qǐng)選擇至少兩種水果！" required minlength="2" multiple="multiple"><option value="b">Banana</option><option value="a">Apple</option><option value="p">Peach</option><option value="t">Turtle</option></select></p><p><label for="vegetables">請(qǐng)選擇不超過兩種蔬菜</label><br><select id="vegetables" name="vegetables" title="請(qǐng)選擇不超過兩種蔬菜！" required maxlength="2" multiple="multiple"><option value="p">Potato</option><option value="t">Tomato</option><option value="s">Salad</option></select></p><p><label for="cars">請(qǐng)選擇至少兩種但不超過三種汽車</label><br><select id="cars" name="cars" title="請(qǐng)選擇至少兩種但不超過三種汽車！" required rangelength="[2,3]" multiple="multiple"><option value="m_sl">Mercedes SL</option><option value="o_c">Opel Corsa</option><option value="vw_p">VW Polo</option><option value="t_s">Titanic Skoda</option></select></p><p><input type="submit" value="Validate Select 測(cè)試"></p> </form></div></body> </html>

js代碼

<script> $.validator.setDefaults({submitHandler: function() {alert("submitted!");} });$(document).ready(function() {$("#form1").validate();$("#selecttest").validate(); }); </script>

?

大家有什么意見或者建議可以留言指導(dǎo)、批評(píng)

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的validate+jquery+ajax表单验证的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。