element-ui表单验证：用户名、密码、电话、邮箱

之前设计login组件时增加了简单的表单验证，因此对应的users组件，添加用户功能也必须设置相应的验证规则。

文档form表单验证只提供了用户名/密码，是否必须/长度限制的验证。对于电话、邮箱和地址的验证如下：

html部分，先绑定props

<el-form-item label="邮箱" prop="email"
:label-width="formLabelWidth">
    <el-input v-model="form.email" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile"
:label-width="formLabelWidth">
    <el-input v-model="form.mobile" autocomplete="off"></el-input>
</el-form-item>

js部分，在data内的return之前

  data () {
    const checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8|9][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
        // 所以我就在前面加了一个+实现隐式转换
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式/长度不正确'))
          }
        }
      }, 100)
    }
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    }
      rules: {
        mobile: [
          { validator: checkPhone, trigger: 'blur', required: true }
        ],
        email: [
          { validator: checkEmail, trigger: 'blur', required: true }
        ]
      }
   }

实现效果如下：

一些常用的正则：

  1 JS的正则表达式
  2 
  3 强：字母+数字+特殊字符 
  4  ^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$
  5    
  6     
  7 中：字母+数字，字母+特殊字符，数字+特殊字符
  8      ^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$
  9 
 10 弱：纯数字，纯字母，纯特殊字符
 11 ^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$
 12 
 13 
 14 //校验是否全由数字组成
 15 
 16 function isDigit(s)
 17 {
 18 var patrn=/^[0-9]{1,20}$/;
 19 if (!patrn.exec(s)) return false
 20 return true
 21 }
 22 
 23 //校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串
 24 function isRegisterUserName(s)  
 25 {  
 26 var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;  
 27 if (!patrn.exec(s)) return false
 28 return true
 29 }
 30 
 31 function isRegisterUserName(s)
 32 {
 33 var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
 34 if (!patrn.exec(s)) return false
 35 return true
 36 }
 37 
 38 
 39 //校验用户姓名：只能输入1-30个以字母开头的字串
 40 Javascript代码
 41 function isTrueName(s)  
 42 {  
 43 var patrn=/^[a-zA-Z]{1,30}$/;  
 44 if (!patrn.exec(s)) return false
 45 return true
 46 }  
 47 }}  
 48 
 49 //校验密码：只能输入6-20个字母、数字、下划线  
 50 function isPasswd(s)  
 51 {  
 52 var patrn=/^(\w){6,20}$/;  
 53 if (!patrn.exec(s)) return false
 54 return true
 55 }  
 56 
 57 //校验普通电话、传真号码：可以“+”开头，除数字外，可含有“-”  
 58 function isTel(s)  
 59 {  
 60 //var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?(\d){1,12})+$/;  
 61 var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;  
 62 if (!patrn.exec(s)) return false
 63 return true
 64 }  
 65 
 66 //校验手机号码：必须以数字开头，除数字外，可含有“-”  
 67 function isMobil(s)  
 68 {  
 69 var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;  
 70 if (!patrn.exec(s)) return false
 71 return true
 72 }  
 73 
 74 //校验邮政编码  
 75 function isPostalCode(s)  
 76 {  
 77 //var patrn=/^[a-zA-Z0-9]{3,12}$/;  
 78 var patrn=/^[a-zA-Z0-9 ]{3,12}$/;  
 79 if (!patrn.exec(s)) return false
 80 return true
 81 }  
 82 
 83 //校验搜索关键字  
 84 function isSearch(s)  
 85 {  
 86 var patrn=/^[^`~!@#$%^&*()+=|\\\][\]\{\}:;'\,.<>/?]{1}[^`~!@$%^&()+=|\\\]  
 87         [\]\{\}:;'\,.<>?]{0,19}$/;  
 88 if (!patrn.exec(s)) return false
 89 return true
 90 }  
 91 
 92 function isIP(s) //by zergling  
 93 {  
 94 var patrn=/^[0-9.]{1,20}$/;  
 95 if (!patrn.exec(s)) return false
 96 return true
 97 }  
 98 
 99 正则表达式
100 ^\\d+$　　//非负整数（正整数 + 0）  
101 ^[0-9]*[1-9][0-9]*$　　//正整数   
102 ^((-\\d+)|(0+))$　　//非正整数（负整数 + 0）   
103 ^-[0-9]*[1-9][0-9]*$　　//负整数   
104 ^-?\\d+$　　　　//整数   
105 ^\\d+(　　//非负浮点数（正浮点数 + 0）   
106 ^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$　  
107 //正浮点数   
108 ^((-\\d+(　　//非正浮点数（负浮点数 + 0）   
109 ^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$  
110 //负浮点数   
111 ^(-?\\d+)(　　//浮点数   
112 ^[A-Za-z]+$　　//由26个英文字母组成的字符串   
113 ^[A-Z]+$　　//由26个英文字母的大写组成的字符串   
114 ^[a-z]+$　　//由26个英文字母的小写组成的字符串   
115 ^[A-Za-z0-9]+$　　//由数字和26个英文字母组成的字符串   
116 ^\\w+$　　//由数字、26个英文字母或者下划线组成的字符串   
117 ^[\\w-]+(　　　　//email地址   
118 ^[a-zA-z]+://(　　//url  
119 ^[A-Za-z0-9_]*$
120 
121 匹配完整域名的正则表达式：
122 [a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?