element-ui自定义登录验证

一，创建

1. 先在src目录下新建validate.js文件
2. 用户名验证

export const validateusername = (rule, value, callback) => {
    const rge = /^[\w-]{4,16}$/
    if (value === '') {
        callback(new Error('请输入用户名'))
      } else if (!rge.test(value)) {
        callback(new Error('请输入字母,数字,4-16位'))
     } else {
        callback()
  }
}

3. 密码验证

export const validatepasswords = (rule, value, callback) => {
  //  生成密码正则
  const reg = /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (!reg.test(value)) {
    callback(new Error('密码必须由6-12位的大小写字母,数字,特殊符号组成'))
  } else {
    callback()
  }
}

二，使用

1. 样式，注意绑定

 <el-form :model="ruleForm" :rules="rule" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model.trim="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" vmodel.trim="ruleForm.password"autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">提交</el-button>
        </el-form-item>
      </el-form>

2. 操作

// 引入验证登录信息的文件
import { validatepassword, validateusername } from '@/utils/validate.js'
export default {
  data() {
    return {
      ruleForm: {
        password: '',
        username: ''
      },
      rule: {
        password: [{ validator: validatepassword, trigger: 'blur' }],
        username: [{ validator: validateusername, trigger: 'blur' }]
      }
    }
  }
}