Element UI Form 表单校验数字、字母、全部英文符号

2,579 阅读1分钟

from表单

<el-form ref="from" :model="password" :rules="rules" @submit.native.prevent label-width="80px">
   <el-form-item required label="旧密码" prop="old">
    <el-input type="password" v-model="password.old" placeholder="请输入旧密码"></el-input>
  </el-form-item>
  <el-form-item required label="新密码" prop="user">
    <el-input type="password" v-model="password.user" placeholder="格式要求:长度大于7,包含下面三项:字母,数字,英文符号"></el-input>
  </el-form-item>
  <el-form-item required label="确认密码" prop="check">
    <el-input type="password" v-model="password.check" placeholder="格式要求:长度大于7,包含下面三项:字母,数字,英文符号"></el-input>
  </el-form-item>
</el-form>

结合正则表达式进行校验(包含全部的英文符号)

// 字母:
([A-Za-z]+)/
// 数字符号:
([\d]+)/
// 英文符号正则表达式:
// 分解版
[ ` , ~ , ! , @ , # , \\$ , % , \\^ , & , \\* , \\( , \\) , \- , _ , = , \\+ , \\{ , \\} , \\[ , \] , \\| , \\ , ; , ' , : , " , \\, , \\. , < , > , \\/ , \\?]+/
// 精简版
[`~!@#\\$%\\^&\\*\\(\\)\-_=\\+\\{\\}\\[\]\\|\\;':"\\,\\.<>\\/\\?]+/
export default {
  data () {
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空'))
      } else if (this.password.user && this.password.check && this.password.user !== this.password.check) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        // 字母
        let alphabet = value.match(/([A-Za-z]+)/)
        // 数字符号
        let number = value.match(/([\d]+)/)
        // 特殊字符(英文符号)
        let special = value.match(/[`~!@#\\$%\\^&\\*\\(\\)\-_=\\+\\{\\}\\[\]\\|\\;':"\\,\\.<>\\/\\?]+/)
        if (alphabet && number && special) {
          callback()
        } else {
          callback(new Error('密码格式错误! (格式要求:长度大于7,包含下面三项:字母,数字,英文符号)'))
        }
      }
    }
    return {
      password: {
        old: '',
        user: '',
        check: ''
      },
      rules: {
        old: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' }
        ],
        user: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        check: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    }
  }
}