Recently, I have written numerous forms, recording the strange verification rules ~

Element’s built-in rules are:

Element, as a common framework, has its own rules attribute, which is easy to understand, and the official document is clear at a glance. It is enough to cope with common verification

Recommend a full web tutorial that I think is good: B site search: bv1y1s7yr

More troublesome are the custom validation functions, for example:

HTML part:

:rules="rules" :inline="true" :model="form" size="medium" ref="form" label-position="right" label-width="136px" validate-on-rule-change class="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>Copy the code

Here is the js section:

Phone: [{required: true, message: 'Please enter your mobile phone number ', 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(" please input the correct phone number or phone number "));}else{callback();}, trigger: 'blur'}], money: [{required: True, message: 'Please enter amount ', trigger: 'change'}, { validator:function(rule,value,callback){ let num=Number(me.numRep)+Number(me.meetingForm.numWork) If (/ ^ \ d + (\ \ d {1, 6})? $/. The test (value) = = false) {callback (new Error (" maximum input 6 decimal point, }else if(Number(value) >num*550/10000){callback(new Error(" up to 6 decimal points can be entered, } else{callback();}}, trigger: 'blur'}]}Copy the code

Next is the call:

this.$refs[formName].validate((valid) => { if(valid) { this.validateForm=true; }else{this.$message. Warning (" Please make sure you entered the message correctly! ") ); this.validateForm=false; }}); return this.validateForm; },Copy the code

JQuery +easyUI form verification

Here’s another example:

HTML part:

<table role="table" class="desigerTable" data-usage=" basic information entry "id="t5" cellpadding="10" cellpadding="10" > <tbody> <tr> <td class="targetarea droppable"> <div data-type="1"> <div class="form-group"> <label class=" col-SM-4" </label> </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"> Total number </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 >Copy the code

Js:

Var formValidate = function () {$("#formA").validate({ignore: "", rules: {days: {required: false,number: true,checkDur:true}, person: {required: false,number: true,checkPerson:true}, }, messages: { days: {number: "please enter a number ", checkDays:"* total number of days not more than 2, can enter a decimal, 0.5, 1,1.5!" }, person: {number: "Please enter a number ", checkPerson:"* Please enter a positive integer!" },}, // Verify onFocusOut :false when getting focus, // verify onKeyUp :false when typing, // after submitting the form, FocusInvalid :true for unvalidated forms, // Remove error when unvalidated elements get focus focusCleanup:true,}); $. The validator. AddMethod (" checkDays ", the function, value, element) {if (value = = 0.5 | | value = = 1 | | value = = 1.5 | | value = = 2) { Return this. Optional (element) | | true}}, "* total number of not more than 2 days, can enter the decimal, 0.5, 1.5!" ); $.validator.addMethod("checkPerson",function(value,element){ var me = /(^[1-9]\d*$)/; return this.optional(element)||(me.test(value)); },"* Please enter a positive integer!" ); / var dataValidate = function (data) {if (! $("#formA").valid()) {Util. Alert (" please enter the correct data! ); return false; } return data; };Copy the code

Validation of native JS forms:

Native JS validation can be implemented by calling onclick, onfocus, onblur, onKeyUp and other events directly

(PS: native really forever god, nothing is native JS can not do, if not, I am too vegetables, continue to roll to learn native.)

Here’s a simple example:

HTML part:

      <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>
Copy the code

Js:

BlurElement (); SubmitForm (); } function blurElement() {document.getelementById ("ame").onblur = function () {vailidateName(); }; / / form submission function function submitForm () {let form = document. The getElementsByClassName (" register ") [0]; form.onsubmit = function (e) { let flag =vailidateName()& vailidatePasswd()& vailidateID(); return flag == 1 ? true : false; }; } function vailidateID() {let id = document.getelementById ("idCode"); let span = next(id); let value = id.value; If (value == "") {sp.innerhtml = "id number cannot be empty "; span.style.color = "red"; return false; } if (value.length! = 18) {sp.innerhtml = "id number length 18 bits "; span.style.color = "red"; return false; } let reg = /^\d{17}$/; let str = value.substring(0, 17); if (! Reg.test (STR)) {sp.innerhtml = "The first 17 digits of the ID number must be a number "; span.style.color = "red"; return false; Function vailidatePasswd() {let passwd = document.getelementbyid ("passwd"); function vailidatePasswd() {let passwd = document.getelementbyid ("passwd"); let span = next(passwd); let value = passwd.value; let code = /^[a-zA-Z]$/; // non-empty if (value == "") {sp.innerhtml = "password cannot be empty "; span.style.color = "red"; return false; }}Copy the code

Ok,, end, this is a typical front end validation form example written recently, still with the requirement battle new validation. The next is more people vomit blood dynamic check, write more…

The article is reprinted with music bytes