elmentui自定义表单验证

csdn同步更新，请移步：https://blog.csdn.net/qq_42358798/article/details/108266660

elmentui的表单验证

关于表单验证参考element官网：https://element.faas.ele.me/#/zh-CN/component/form

• 关于表单验证的深层绑定写法

  <el-form-item label="his系统编号" prop="doctorPracticeSites[0].doctorNumber">
    <el-input v-model="formInline.doctorPracticeSites[0].doctorNumber" placeholder="请填写" />
  </el-form-item>

  rules:{
    name:[ { required: true, message: '请输入姓名', trigger: 'blur' }],
   'doctorPracticeSites[0].doctorNumber':[ { required: true, message: '请输入系统编号', trigger: 'blur' }],
  }

  elmentui的表单验证

  在src文件夹下的utils文件下新建一个validate.js，用于封装表单验证的方法，内容如下：
  (更多验证规则请参考上篇文章之”常用的正则验证”，放上链接：https://blog.csdn.net/qq_42358798/article/details/108257573)

  //自定义验证用户名
  export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
  }
  //验证邮箱
  export function isEmail(path) {
  return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(path)
  }
  //验证手机号
  export function isPhone(path) {
  return /^1[3456789]\d{9}$/.test(path)
  }
  //更多验证规则......

  组件el-form的属性rules绑定loginRules

  <el-form
  ref="loginForm"
  :model="loginForm"
  :rules="loginRules"
  class="login-form"
  auto-complete="on"
  label-position="left"
  >
    <el-form-item prop="username">
         <el-input
           ref="username"
           v-model="loginForm.username"
           placeholder="账号"
           name="username"
           type="text"
           tabindex="1"
           auto-complete="on"
         />
    </el-form-item>
    <el-button :loading="loading" type="primary" @click.native.prevent="handleLogin">登录</el-button>
  </el-form>

  之前封装好的验证规则，在需要的页面引入：

  import { validUsername } from "@/utils/validate";
  data(){
   const validateUsername = (rule, value, callback) => {
     //validUsername则为从validate.js引入的方法
     if (!validUsername(value)) {
       callback(new Error("请输入正确的用户名"));
     } else {
       callback();
     }
   };
   return {
       loginRules: {
           username: [
             // validator属性为data中声明的validateUsername
             { required: true, trigger: "blur", validator: validateUsername }
           ]
         },
   }
  },
  methods:{
    handleLogin() {
      //loginForm为el-form的ref绑定的值
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          //通过验证进入以下操作
          this.$store.dispatch('user/login', this.loginForm).then((res) => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch((e) => {
            console.log(e)
            this.loading = false
          })
        } else {
          //没通过验证进入以下操作
          console.log('error submit!!');
          return false;
        }
      });
    }
  }

  以上内容就是elment-ui里的自定义表单内容了