Shulou(Shulou.com)06/01 Report--

This article mainly explains "vue how to achieve form data validation", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "vue how to achieve form data validation" bar!

Add: rules to the el-form form

Define rules in data

Bind the defined rules to the el-form-item

The code is as follows:

Login reset export default {data () {return {/ / login form data binding object loginform: {username:'', password:''}, / / form validation rules loginformrules: {/ / verify whether the user name is legal username: [{required: true, message: 'please enter a user name', trigger: 'blur'}, {min: 3, max: 10 Message:'3 to 10 characters in length', trigger: 'blur'}], / / verify whether the password is valid password: [{required: true, message:' enter password', trigger: 'blur'}, {min: 6, max: 15, message:' 6 to 15 characters', trigger: 'blur'}]}}}

Ps: let's take a look at the data validation code for the vue custom instruction input form

I. Code

{{msg}} {{msg1}} {{msg2}} {{msg3}} export default {name: 'check', data () {return {msg:' instruction', tipsbordercolor: 'red' Msg1: 'simplest instruction', msg2: 'verify instructions that cannot be empty', msg3: 'perform regular verification', tipsmsg:',}} Directives: {/ / directive to modify the input box input: {/ / when the bound element is inserted into the dom, inserted: function (el) {el.style.width = "300px" El.style.height = "35px"; el.style.lineheight = "35px"; el.style.background = "# ddd"; el.style.fontsize = "16px"; el.style.border = "1px solid # eee"; el.style.textindent = "5px"; el.style.textindent = "8px"; el.style.borderradius = "5px" }}, / / the input box defaults to the selected instruction focus: {inserted: function (el) {el.focus () }}, / / instruction required: {inserted: function (el) {el.addeventlistener ('blur', function () {if (el.value = =''| | el.value = = null) {el.style.border = "1px solid red"; console.log ('I can't be empty') }})}}, / / verify instruction checked: {inserted: function (el) {return el}}, / / verify validate: {inserted: function (el) Validatestr) {/ / split the validation rules into validation arrays let validaterulearr = validatestr.value.split ("|") / / el.addeventlistener ('blur', function () {/ / lose focus to verify checkedfun ();}); / / cycle to verify function checkedfun () {for (var I = 0; I) when listening loses focus

< validaterulearr.length; ++i) { let requiredregex = /^required$/; // 判断设置了required let emailregex = /^email$/; // 判断设置了email let phoneregex = /^phone$/; // 判断设置了 phone let minregex = /min\(/; //判断设置了min 最小值 let maxregex = /max\(/; //判断设置了max 最大值 let minlengthregex = /minlength\(/; //判断设置了 minlength 最大长度 let maxlengthregex = /maxlength\(/; //判断设置了 maxlength 最大长度 let regexregex = /regex\(/; // 判断设置了required if (requiredregex.test(validaterulearr[i])) { if (!required()) { break; } else { removetips(); } } // 判断设置了email if (emailregex.test(validaterulearr[i])) { if (!email()) { break; } else { removetips(); } } // 判断设置了 phone if (phoneregex.test(validaterulearr[i])) { if (!phone()) { break; } else { removetips(); } } // 判断是否设置了最小值 if (minregex.test(validaterulearr[i])) { if (!eval(validaterulearr[i])) { break; } else { removetips(); } } // 判断是否设置了最大值 if (maxregex.test(validaterulearr[i])) { if (!eval(validaterulearr[i])) { break; } else { removetips(); } } // 判断设置了最小长度 if (minlengthregex.test(validaterulearr[i])) { if (!eval(validaterulearr[i])) { break; } else { removetips(); } } // 判断设置了最大长度 if (maxlengthregex.test(validaterulearr[i])) { if (!eval(validaterulearr[i])) { break; } else { removetips(); } } // 判断测试正则表达式 if (regexregex.test(validaterulearr[i])) { if (!eval(validaterulearr[i])) { break; } else { removetips(); } } } } // 验证是否是必填项 function required() { if (el.value == '' || el.value == null) { // console.log("不能为空"); tipmsg("不能为空"); return false; } return true; } // 验证是否是邮箱 function email() { let emailrule = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/; if (!emailrule.test(el.value)) { tipmsg("请输入正确的邮箱地址"); return false; } return true; } // 验证是否是手机号码 function phone() { let phonerule = /^[1][3,4,5,7,8][0-9]{9}$/; if (!phonerule.test(el.value)) { tipmsg("请输入正确的手机号码"); return false; } return true; } // 最小值验证 function min(num) { if (el.value < num) { tipmsg("最小值不能小于" + num); //console.log('最小值不能小于'+num); return false; } return true; } // 最大值验证 function max(num) { if (el.value >

Num) {tipmsg ("maximum cannot be greater than" + num); / / console.log ('maximum cannot be greater than' + num); return false;} return true;} / / minimum length verification function minlength (length) {if (el.value.length)

< length) { //console.log('最小长度不能小于'+length); tipmsg("最小长度不能小于" + length); return false; } return true; } // 最大长度进行验证 function maxlength(length) { if (el.value.length >

Length) {/ / console.log ('maximum length cannot be greater than' + length); tipmsg (maximum length cannot be greater than'+ length); return false;} return true } / / validate regular expressions function regex (rules) {if (! rules.test (el.value)) {tipmsg ("Please enter correct format"); return false;} return true } / / add prompt function tipmsg (msg) {removetips (); let tipsdiv = document.createelement ('div'); let curdate = date.parse (new date ()); tipsdiv.innertext = msg; tipsdiv.classname = "tipsdiv"; tipsdiv.id = curdate Tipsdiv.style.position = "absolute"; tipsdiv.style.top = el.offsettop + 45 + 'px'; tipsdiv.style.left = el.offsetleft +' px'; document.body.appendchild (tipsdiv); / / settimeout (function () {/ / document.getelementbyid (curdate). Remove (); / /}, 2000) Function removetips () {if (document.getelementsbyclassname ('tipsdiv') [0]) {document.getelementsbyclassname (' tipsdiv') [0] .remove ();},}} .input {padding-bottom: 20px; float: left; clear: both Margin-left: 500px; display: block;} .check input {width: 300px; height: 35px; outline: none; background: # ddd;} .check span {padding-left: 20px;} .tipsdiv {height: 27px; line-height: 25px; border: 1px solid # 333; background: # 333; padding: 0px 5px; border-radius: 4px; color: # fff; font-size: 16px } .tipsdiv: before {content:'; display: block; border-width: 0 5px 8px; border-style: solid; border-color: transparent transparent # 000; position: absolute; top:-9px; left: 6px } Thank you for your reading, the above is the content of "how to achieve form data validation in vue". After the study of this article, I believe you have a deeper understanding of how vue implements form data validation, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.