最近寫了無數各種形式的表單，記錄下奇奇怪怪的校驗規則~

一：首先是element自帶的rules校驗規則：

element作為常用框架，自帶rules屬性簡單易懂，官方文檔一目了然，不再贅述，應付常用校驗足夠了，

相對麻煩的是自定義的校驗函數，舉個例子：

html部分：

<el-form id="form":rules="rules":inline="true":model="form"size="medium"ref="form"label-position="right"label-width="136px"validate-on-rule-changeclass="postForm" autocomplete="off" inline-message><el-form-item prop="phone"><el-input v-model="form.phone" name="phone" id="phone" size="medium" required></el-input></el-form-item><el-form-item prop="money"><el-input v-model="form.money" name="money" id="money" size="medium" required></el-input></el-form-item></el-form>

下面是js部分：

rules:{phone: [{ required: true, message: '請輸入手機號碼', trigger: 'blur' },{ validator:function(rule,value,callback){if(/^1[34578]\d{9}$/.test(value) == false&&/^\d{4}-?\d{4}$/.test(value) == false){callback(new Error("請輸入正確的手機號或電話號碼"));}else{callback();}}, trigger: 'blur'}],money: [{required: true, message: '請輸入金額', trigger: 'change'},{ validator:function(rule,value,callback){let num=Number(me.numRep)+Number(me.meetingForm.numWork)if(/^\d+(\.\d{1,6})?$/.test(value) == false){callback(new Error("最長可輸入6位小數點，系統限制最大不能超過 550*總人數/10000"));}else if(Number(value) >num*550/10000){callback(new Error("最長可輸入6位小數點，系統限制最大不能超過 550*總人數/10000"));}else{callback();}}, trigger: 'blur'}] } formValidate(formName){this.$refs[formName].validate((valid) => {if(valid) {this.validateForm=true;}else{this.$message.warning("請確認輸入信息無誤！");this.validateForm=false;}});return this.validateForm; },

二：接下來也是比較常用的，jQuery+easyUI 的表單校驗：

依舊直接上例子：

html部分：

<form id="formA" class="postForm" autocomplete="off"><table role="table" class="desigerTable" data-usage="基本信息錄入" id="t5" cellpadding="10" cellspacing="10"><tbody><tr><td class="targetarea droppable"><div data-type="1"><div class="form-group"><label class="col-sm-4 control-label">總天數</label></div></div></td><td class="targetarea droppable"><div data-type="1" class="wrapper"><div class="form-group"><input class="form-control" placeholder="" id="days"name="days" type="text"></div></div></td><td class="targetarea droppable"><div data-type="1"><div class="form-group"><label class="col-sm-4 control-label">總人數</label></div></div></td><td class="targetarea droppable" colspan="2"><div data-type="1" class="wrapper"><div class="form-group"><input class="form-control" placeholder="" id="person"name="person" type="text"></div></div></td></tr></tbody></table> </form> /*** 校驗主表單*/var formValidate = function () {//表單驗證規則$("#formA").validate({ignore: "",rules: {days: {required: false,number: true,checkDur:true},person: {required: false,number: true,checkPerson:true},},messages: {days: {number: "請輸入數字",checkDays:"*總天數不超過2天，可輸入小數，0.5，1，1.5！"},person: {number: "請輸入數字",checkPerson:"*請輸入正整數！"},},//是否在獲取焦點時驗證onfocusout:false,//是否在敲擊鍵盤時驗證onkeyup:false,//提交表單后，（第一個）未通過驗證的表單獲得焦點focusInvalid:true,//當未通過驗證的元素獲得焦點時，移除錯誤提示focusCleanup:true,});$.validator.addMethod("checkDays",function(value,element){if(value == 0.5||value == 1||value == 1.5||value == 2){return this.optional(element)||true}},"*總天數不超過2天，可輸入小數，0.5，1.5！");$.validator.addMethod("checkPerson",function(value,element){var me = /(^[1-9]\d*$)/;return this.optional(element)||(me.test(value));},"*請輸入正整數！");/*** 校驗方法調用*/var dataValidate = function (data) {if (!$("#formA").valid()) {Util.alert("請輸入正確的數據！");return false;}return data;};

三：原生js form表單校驗：

原生js校驗可直接調用onclick，onfocus，onblur，onkeyup等事件來實現

（ps：原生真的永遠的神，沒有什么是原生js做不到的，如果做不到，就是我太菜了，繼續滾去學原生。。）

繼續簡單明了舉例子：

html部分：

<form action="example.html" method="post" enctype="multipart/form-data" class="register"><div><label for="idCode">身份證號</label><input type="text" id="idCode" class="idCode" name="idCode" placeholder="身份證號"/></div><div><label for="passwd">密碼</label><input type="passwd" name="passwd" id="passwd" class="passwd" placeholder="密碼"/></div> </form> onload = function () {blurElement();submitForm();}//元素失去焦點時校驗function blurElement() {//驗證姓名document.getElementById("ame").onblur = function () {vailidateName();};//表單提交函數function submitForm() {let form = document.getElementsByClassName("register")[0];form.onsubmit = function (e) {let flag =vailidateName()& vailidatePasswd()& vailidateID();return flag == 1 ? true : false;};}//驗證身份證號碼 18位function vailidateID() {let id = document.getElementById("idCode");let span = next(id);let value = id.value;//判斷空if (value == "") {span.innerHTML = "身份證號碼不能為空";span.style.color = "red";return false;}//判斷長度if (value.length != 18) {span.innerHTML = "身份證號碼長度18位";span.style.color = "red";return false;}//判斷前17位數字let reg = /^\d{17}$/;let str = value.substring(0, 17);if (!reg.test(str)) {span.innerHTML = "身份證號碼前17位必須是數字";span.style.color = "red";return false;}//驗證密碼:6-12位非空，必須包含大寫字符，字母開頭function vailidatePasswd() {let passwd = document.getElementById("passwd");let span = next(passwd);let value = passwd.value;let code = /^[a-zA-Z]$/;//非空if (value == "") {span.innerHTML = "密碼不能為空";span.style.color = "red";return false;}}

ok，結束，以上就是最近寫的典型的前端校驗表單例子，還在跟需求battle新的校驗。。下一篇是更讓人吐血的動態校驗。。。
博客

總結

以上是生活随笔為你收集整理的js-最常用的js表单校验1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。