<! DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <style> ul { margin: 0; padding: 0; list-style: none; } .fn-textcenter { text-align: center; } .main { max-width: 1000px; margin: 0 auto; zoom: 1; } .main .top { text-align: center; } .list ul li { padding: 10px; } .list ul li label { width: 40%; display: inline-block; padding: 0 10px; text-align: right; vertical-align: middle; } .list ul li input { border: 1px solid #e2e2e2; padding: 10px; width: 200px; } .list ul li input.valid { border: 1px solid green; } .list ul li input.error { border: 1px solid red; } .list ul li .btn-blue { background: #06a5e1; color: #fff; text-align: center; display: inline-block; padding: 5px 30px; cursor: pointer; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; } .list ul li .btn-blue:disabled { background: #999; cursor: not-allowed; }. List ul li. Btn-blue :not([disabled]):hover {opacity: 0.8; filter: alpha(opacity=80); }. List input:focus {border-color: #66AFE9; Box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6); outline: 0 none; } .list .tip-error { background-color: #F2DEDE; border-color: #EED3D7; color: #B94A48; vertical-align: middle; padding: 5px 30px; display: none; } .error-msg { color: red; font-size: 12px; } < / style > < / head > < body > < div class = "main" > < div class = "top" > < div class = "" > < h2 > register < / h2 > < / div > < / div > <! -- The user name cannot be empty. The password must contain at least six characters. Mobile phone number must conform to the format --> <form ID ="registerForm"> <div class="list"> <ul> <li> <label> User name </label> <input type="text" Name ="userName" class="name" placeholder=" enter your userName" > </li> <li> <label> Class =" PWD "placeholder=" input password "> </li> <li> <label> </label> <input type="text" name="phoneNumber" Placeholder =" input your phone ">< /li> <li class=" fn-textCenter "><button type="button" id="btnSubmit" class=" bTN-blue </button></li> </ul> </div> </div> </form> <script> var checkResult = {errorTip: function (dom, errMsg) { var errDom; / / if there is any error judge li behind - first MSG this dom var errmsgT = dom parentElement. QuerySelector ('. The error MSG - '); if (! errmsgT) { errDom = document.createElement('span'); errDom.className = 'error-msg'; errDom.innerText = errMsg; dom.parentElement.appendChild(errDom); }}, ok: function (dom) {// remove the red part of the input and add the error message dom.classlist.remove ('error'); dom.classList.add('valid'); var errmsgT = dom.parentElement.querySelector('.error-msg'); if (errmsgT) { dom.parentElement.querySelector('.error-msg').remove(); } }, no: function (dom, errMsg) { dom.classList.remove('valid'); dom.classList.add('error'); this.errorTip(dom, errMsg); // strategies['minLength']('ss',6,'error') var strategies = {minLength: function (errMsg, length) { if (this.value.length < length) { checkResult.no(this, errMsg); return errMsg; } else { checkResult.ok(this); } }, isNumber: function (errMsg) { if (! /\d+/.test(this.value)) { checkResult.no(this, errMsg); return errMsg; } else { checkResult.ok(this); } }, required: function (errMsg) { if (this.value === '') { checkResult.no(this, errMsg); return errMsg; } else { checkResult.ok(this); } }, isMobile: function (errMsg) { if (! /(^1[3|5|8][0-9]{9}$)/.test(this.value)) { checkResult.no(this, errMsg); return errMsg; } else { checkResult.ok(this); }}}; Function Validator() {this.items = []; }; Prototype = {constructor: Validator, // add: function (dom, rule) { for (let i = 0, len = rule.length; i < len; i++) { var strategy = rule[i].strategy; var errorMsg = rule[i].errorMsg; If (strategy.indexof ('minLength')! == -1) { var temp = strategy.split(':'); var minLen = temp[1] strategy = temp[0]; } console.log(strategy); this.items.push(strategies[strategy].bind(dom, errorMsg, minLen)); Start: function () {for (var I = 0; i < this.items.length; ++i) { var ret = this.items[i](); if (ret) { console.log('oooo'); // break; } } } } var validate = new Validator(); var registerForm = document.getElementById('registerForm'); Validate. Add (registerform. userName, [{strategy: 'required', errorMsg: 'userName cannot be empty'}, {strategy: 'isNumber', errorMsg: 'digits only'}]); Validate.add (registerform. password, [{strategy: 'required', errorMsg: 'Password cannot be empty'}]); Validate. The add (registerForm. PhoneNumber, [{strategy: 'isMobile, errorMsg:' please enter the correct phone number '}]); document.getElementById('btnSubmit').onclick = function () { var ret = validate.start(); console.log(ret); } registerForm.querySelectorAll('input').forEach(function (option, index) { option.addEventListener('blur', function (ev) { var ret = validate.start(); }) }) </script> </body> </html>Copy the code