jQuery表單驗證外掛Validator的使用方法
from表單資料的合法性驗證是個很常見的需求,jQuery提供了一個外掛:jquery validate 官網下載。
若想使用需先引用jquery.validate.js,並且要在jquery.js之後引用。
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
把現在寫的專案拿來演示一下,其使用了bootstrap框架。
<form class="form-horizontal" id="fillForm" action="javascript:void(0);">
<div class="form-group">
<label for="new_userName" class="col-md-2 control-label">暱稱</label>
<div class="col-md-8">
<div class="input-group">
<span class ="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" id="new_userName" name="new_userName" class="form-control" placeholder="輸入新暱稱(暱稱確認後不可更改,4-10個字元)" >
</div>
</div>
</div>
<div class="form-group">
<label for="new_userPwd" class="col-md-2 control-label">密碼</label>
<div class="col-md-8">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input type="password" id="new_userPwd" name="new_userPwd" class="form-control" placeholder="輸入密碼(5-15個字元)"/>
</div>
</div>
</div>
<div class="form-group">
<label for="new_userPwd_twice" class="col-md-2 control-label">確認密碼</label>
<div class="col-md-8">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input type="password" id="new_userPwd_twice" name="new_userPwd_twice" class="form-control" placeholder="請再次輸入密碼"/>
</div>
</div>
</div>
<div class="form-group">
<label for="new_userEmail" class="control-label col-md-2">郵箱</label>
<div class="col-md-8">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input id="new_userEmail" name="new_userEmail" type="email" class="form-control" placeholder="輸入個人郵箱"/>
</div>
</div>
</div>
<div class="form-group">
<label for="new_userPhone" class="control-label col-md-2">手機</label>
<div class="col-md-8">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-phone"></span>
</span>
<input type="text" id="new_userPhone" name="new_userPhone" class="form-control" placeholder="輸入個人手機號"/>
</div>
</div>
</div>
<div class="form-group">
<label for="new_userBirth" class="control-label col-md-2">生日</label>
<div class="col-md-8">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input id="new_userBirth" name="new_userBirth" class="form-control" placeholder="選擇您的生日(1960~2012)" readonly />
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">性別</label>
<div class="radio col-md-8">
<label class="col-md-2">
<input type="radio" name="new_userGender" id="man" value="man">
男
</label>
<label class="col-md-2">
<input type="radio" name="new_userGender" id="woman" value="woman">
女
</label>
<label class="col-md-2">
<input type="radio" name="new_userGender" id="secret" value="secret" checked>
保密
</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">院系</label>
<div class="col-md-8">
<div id="col_and_maj" class="input-group">
<div class="col-md-4">
<select id="new_userCollege" name="new_userCollege" class="form-control col-md-3 prov"></select>
</div>
<div class="col-md-4">
<select id="new_userMajor" name="new_userMajor" class="form-control col-md-3 city"></select>
</div>
</div>
</div>
</div>
<div class="form-group form-button">
<button type="reset" class="btn btn-default col-md-offset-8">重置</button>
<button id="fillFormSubmit" type="submit" class="btn btn-primary">確認</button>
</div>
</form>
html檔案跟平常一樣,主要在js中進行驗證:
$(function(){
jQuery.validator.addMethod("regUserName", function (value, element) {
return this.optional(element) || /^[0-9]*[a-zA-Z_\u4e00-\u9fa5]+[0-9]*$/.test(value);
}, "註冊暱稱為4-10位數字、下劃線、中文或英文字母,但不能全是數字");
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "請正確填寫您的手機號碼");
//登入帳號合法性驗證
jQuery.validator.addMethod("logAccountCheck", function (value, element) {
var length = value.length;
var mobile = /^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/;
return this.optional(element) || (length == 11 && mobile.test(value)) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "暱稱不符合登入規則");
$("#fillForm").validate({
errorElement: 'span',
errorClass: 'help-block',
focusInvalid: false,
rules: {
new_userName: {
required: true,
regUserName: true,
minlength: 4,
maxlength: 10
},
new_userPwd: {
required: true,
rangelength: [5, 15]
},
new_userPwd_twice: {
required: true,
equalTo: "#new_userPwd"
},
new_userEmail: {
required: true,
email: true
},
new_userPhone: {
required: true,
isMobile:true,
digits: true,
minlength: 11,
maxlength: 11
},
new_userBirth: {
required: true
},
new_userCollege: {
required: true
},
new_userMajor: {
required: true
}
},
messages: {
new_userName: {
required: '暱稱不能為空',
minlength: '暱稱最少為4位',
maxlength: '暱稱最多為10位'
},
new_userPwd: {
required: '密碼不能為空',
rangelength: $.validator.format("密碼長度必須在 {0} 到 {1} 之間")
},
new_userPwd_twice: {
required: '此項不能為空',
equalTo: '兩次輸入的密碼必須一致'
},
new_userEmail: {
required: '郵箱不能為空',
email: '郵箱格式不正確(例如: [email protected])'
},
new_userPhone: {
required: '電話號不能為空',
digits: '電話號必須是數字',
minlength: '電話號為11位',
maxlength: '電話號為11位'
},
new_userBirth: {
required: '生日不能為空'
},
new_userCollege: {
required: '學院不能為空'
},
new_userMajor: {
required: '專業不能為空'
}
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
success: function (label) {
label.closest('.form-group').removeClass('has-error').addClass('has-success');
label.remove();
},
errorPlacement: function (error, element) {
element.parent('div').after(error);
},
submitHandler: function (form) {
var result = {
"new_userName": $("#new_userName").val(),
"new_userPwd": $("#new_userPwd").val(),
"new_userEmail": $("#new_userEmail").val(),
"new_userPhone": $("#new_userPhone").val(),
"new_userBirth": $("#new_userBirth").val(),
"new_userGender": $("input[name='new_userGender']:checked").val(),
"new_userCollege": $("#new_userCollege").val() + ',' + $("#new_userMajor").val()
};
result.new_userIP = ip;
var res = JSON.stringify(result);
alert(res);
return false;
}
})
})
簡單用法:
1.:rules裡定義輸入框規則,常見的有required, minlength, maxlength, email, 其中使用輸入框的name屬性來指定輸入框。
2:messages裡定義當輸入內容不符合規則時顯示的資訊,如果自定義則顯示預設的錯誤資訊。
3:可以自定義規則,比如上面程式碼開頭部分定義了自定義規則,可以根據自己的需求仿照程式碼即可,而且網上也提供了現成的自定義驗證規則。
4:當輸入框均符合規則時,可以點選提交,此時,會指定submitHandler函式,
更詳細的使用教程可參考官網
相關推薦
jQuery表單驗證外掛Validator的使用方法
from表單資料的合法性驗證是個很常見的需求,jQuery提供了一個外掛:jquery validate 官網下載。 若想使用需先引用jquery.validate.js,並且要在jquery.js之後引用。 <script src="js
jquery表單驗證外掛
jquery表單驗證外掛 <form id="submit_form" action="/" method="post"> <input name="headPersonPhone" class="easyui-textbox" data-options="required
jQuery 表單驗證外掛jQuery Validation Engine用法詳解
功能強大的 jQuery 表單驗證外掛,適用於日常的 E-mail、電話號碼、網址等驗證及 Ajax 驗證,除自身擁有豐富的驗證規則外,還可以新增自定義的驗證規則。 jQuery Validatio
不是一般地好用的jquery表單驗證外掛-Validform
之前博主推薦過jQuery Validate,因為之前也在用,但是配置稍微顯得有些麻煩,直到最近的這個專案用到了validform,才讓我大開眼界,整個介面突然感覺太友好了,先來幾張效果圖吧。 整個過程引用的css及js非常少。 c
jQuery Validator 表單驗證外掛
jQuery Validate 外掛為表單提供了強大的驗證功能,讓客戶端表單驗證變得更簡單,同時提供了大量的定製選項,滿足應用程式各種需求。該外掛捆綁了一套有用的驗證方法,包括 URL 和電子郵件驗證,同時提供了一個用來編寫使用者自定義方法的 API。所有的捆綁方法預設使用
【常用 JS 外掛】01 jQuery Validation 表單驗證外掛
表單驗證框架 jQuery Validation 前端表單驗證框架 頁面引用 <!-- jQuery Validation 1.14.0 --> <script src="/static/assets/plugins/jquery-valida
【常用 JS 外掛】01 jQuery Valdation 表單驗證外掛
表單驗證框架 jQuery Validation 前端表單驗證框架 頁面引用 <!-- jQuery Validation 1.14.0 --> <script src="/static/assets/plugins/jquery-valida
表單驗證外掛jquery.validate.js
<spanstyle="white-space:pre"></span>class="required" 必須填寫 <spanstyle="white-space:pre"></span>class="required email"
jQuery html5Validate基於HTML5表單驗證外掛
解決了之前元件如下不足: 1. 自定義驗證順序有問題; 2. 即時驗證支援沒內建; 3. 不能隨意定製驗證規則; 等等。 今年會開源,大家稍安~ 更新於2016-07-08 又有不少人問了,開源還需要時日。不過大家現在是可以使用的,下面是最簡單使用,需要sea
nice-validator表單驗證外掛的簡單使用
前言 前端表單校驗是過濾無效資料、假資料、有毒資料的第一步,是資料安全的第一道關卡,雖然我們不能100%相信客戶端提交的資料(真正的校驗還得在服務端進行),但設定前端表單校驗也是至關重要的,自己寫邏輯程式碼一個一個表單欄位去校驗不現實,又不想自己造輪子,使用jquery外掛是不錯的選擇,這裡記錄一下
簡單的jquery表單驗證
append 提交 ren pre img als pri button font <tr>
前端——JQuery表單驗證插件
params brush xxx pass java blog scrip ida red 1、引入JQuery插件(依賴JQuery) <script src="js/jquery-1.11.3.min.js" type="text/javascript">
jquery表單驗證10章
attr inner 不能 att length parent created create plus 淘寶網購物車: /** * Created by MLQ on 2018/04/12. */ $(function () { $("img[
jquery表單驗證
ger clas remove col for 郵箱 追加 重置 UNC 用戶名: 郵箱: 個人資料: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona
實現Vue表單驗證外掛
表單驗證存在於每一個後臺系統中,它承載了許多的邏輯以及狀態。但是,過於某些的場景,會導致程式碼臃腫,如何更好地梳理它,來解決開發的痛點。 1. 前言 上篇文章介紹了,如何函式式呼叫表單元件從而減少維護其狀態的方法基於Vue構造器建立Form元件的通用解決方案。現在來介紹下如何處理表單驗證問題,現
前端tab切換 和 validatejs表單驗證外掛
一、tab切換 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta na
jQuery 表單驗證控制元件 比較簡單
學習jquery, 自己寫的一個基於jQuery的表單驗證練手 比較簡單 下載地位 http://download.csdn.net/detail/lpy3654321/7816687 不要積分的 頁面效果: HTML 程
jquery表單驗證框架 jquery.validate.min.js的使用
jquery表單驗證框架 jquery.validate.min.js的使用 http://www.cnblogs.com/linjiqin/p/3431835.html <form id="formId" class="form
iCheck表單美化外掛使用方法詳解(含引數、事件等)
iCheck 特色: 1、在不同瀏覽器(包括ie6+)和裝置上都有相同的表現 — 包括 桌面和移動裝置 2、支援觸控裝置 — iOS、Android、BlackBerry、Windows Phone等系統 4、方便定製 — 用HTML 和 CSS 即可為其設定樣式 (多套面板) 5、體積小巧 — gzi
vue.js表單驗證外掛(vee-validate)的使用
vue.js表單驗證外掛的使用更多文章,請訪問我的部落格綜述名稱:vee-validate用途:簡單的 Vue.js 表單驗證外掛官網:地址github:地址特別提示配合laravel使用特別好使 因為驗證規則和laravel後端的驗證規則一樣外掛既可以應用於SPA也可以應用