家教网站开发日志（一）

         

目录

                  关于Element-ui中的rules验证

  1.如何对el-form元素设置rules验证   

  2.rules验证的编写

  3.如何在rules设置自定义验证器valiator

  4.进行全局验证 

---

关于Element-ui中的rules验证

  1.如何对el-form元素设置rules验证   

        对于 el-form元素：

                1.对相应的el-form元素应设置ref属性（即绑定控件，调用时使用this.$ref.[控件名]）

                2.同时对el-form元素使用:model元素绑定相应的表单数据域（处于data域）

        对于需要验证的el-item元素：

                1.设置prop属性（rules验证的依据）

                2.使用v-mod绑定data域中的相应属性

例如：

<template>
  <div>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" hide-required-asterisk>
       <el-form-item label="账号" prop="userName">
         <el-input v-model="loginForm.userName" placeholder="请输入账号" type="text"/>
       </el-form-item>
       <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" placeholder="请输入密码" show-password type="password"/>
       </el-form-item>
     </el-form>
  </div>
</template>

<script>
  data() {
    loginForm: {
      userName: '',
      password: '',
      ...表单属性...
    },
    
    loginRules: {
        userName: [{...}],
        password: [{...}],
    },
  }
</scriot>

  2.rules验证的编写

    rules的参数

    例如：

loginRules: {
        userName: [{required: true, message: '账号不可为空', trigger: 'blur'}],
        password: [{required: true, message: '密码不可为空', trigger: 'blur'}],

},

    required：Boolean，表示该项是否是必填项，为true时表示必填

    ps：required属性为true时，则相应的输入框前会有一个*

   

 若想去除可对el-form元素添加hide-required-asterisk属性，即：

<el-form ref="loginForm" :model="loginForm" :rules="loginRules" hide-required-asterisk>

    message：多种类型，一般为String，标识该项在验证不通过时显示的信息

    trigger：取值为blur/change，blur表示失去焦点时才触发验证，change表示值改变时就触发

    ps：可以同时取值blur和change，即:

trigger:['blur','change']

   例如

email: [{required: true,message:'请输入邮箱',trigger: ['blur','change']},
          {type:'email',message: '请输入正确的邮箱',trigger: ['blur','change']}],
code: [{required: true,message:'请输入验证码',trigger: 'blur'},
          {type:'string',message: '请输入正确的验证码',pattern:/^[0-9]{6}$/,trigger: ['blur','change']}]

type:该项的数据类型，不符合类型要求，则验证不通过，显示错误信息

  支持如下类型：

• string: String类型，这是默认值
• number: Number类型，包含整数和小数
• integer： 整数
• float：小数，此时不能为整数，必须有小数点
• boolean：Boolean类型，true/false
• array：Array类型
• object：Object类型，不能为数组
• enum：Enum类型，需要搭配enum参数指定枚举项
• method：function类型
• regexp：正则类型，值必须是一个合法的正则表达式，可以通过new RegExp来创建
• date：Date类型，值必须可以转为有效日期值
• url：Url类型，值必须符合url格式
• email：Email类型，值必须符合邮箱格式
• hex：16进制类型，如0xFFF
• any：任意类型，不限制

 pattern:正则表达式，表示该项必须匹配正则表达式才能通过验证（应用于复杂的自定义类型）

  3.如何在rules设置自定义验证器valiator

    使用rules中的valiator属性，用法：

validator:'验证器名'

   同时，在data域中创建相应的的验证器

const 验证器名:(参数1,参数2,...)=(rules,value,callback)=>{
  ...逻辑判断...
  if(条件){
    callback(...)
  }else{
    callback(...)
  }
}

• rule：指向规则的对象，其中的 field 属性是当前正在校验字段的名称。
• value：当前校验字段的值。
• callback: 校验结束的回调函数，校验通过则不带参数，直接调用callback()，如果校验不通过，则带一个Error错误参数

callback(new Error('两次密码不一致'))

例如：

data() {
    const checkPwd=(rules,value,callback)=>{
      if(value!==this.registerForm.password){
        callback(new Error('两次密码不一致'))
      }else{
        callback()
      }
    }

    const checkEmail=(rules,value,callback)=>{
      if(value==='') {
        this.Btnstatus = true
        callback(new Error('请输入邮箱'))
      }else if(!MailFormat.test(this.registerForm.email)){
        this.Btnstatus = true
        callback(new Error('请输入正确的邮箱'))
      }else{
        this.Btnstatus=false
        callback()
      }
    }

    return {
      registerForm: {
        userName: '',
        password: '',
        password1: '',
        email: '',
        code: '',
      },

      registeRrules: {
        userName: [{required: true,message:'请输入用户名',trigger: 'blur'},
          {min:1,max:10,message: '请输入规定长度的用户名',trigger: ['blur','change']}],
        password: [{required: true,message:'请输入密码',trigger: 'blur'}],
        password1: [{required: true,message:'请确认密码',trigger: 'blur'},
          {type:'string', validator:checkPwd,trigger: ['blur','change']}],
        email: [{required: true,validator:checkEmail,trigger: ['blur','change']}],
        code: [{required: true,message:'请输入验证码',trigger: 'blur'},
          {type:'string',message: '请输入正确的验证码',pattern:/^[0-9]{6}$/,trigger: ['blur','change']}],
      },
    }
  },

  4.编写全局验证方法

在method域中编写验证方法

Submit(form) {
  this.$refs[form].validate((valid) => {
  if (valid) {
    //验证通过后执行操作
  }else{
    //验证失败后执行操作
    //return false;
  }
}

使用次方法的好处是若页面上有多张表单，可以通过form（传入表单的名字）的值进行不同的操作

如图

Submit(form) {
  this.$refs[form].validate((valid) => {
  if (valid) {
    if(form==='表单名1') {
      //表单1验证通过后执行操作
    }
    else if(form==='表单名2'){
      //表单2验证通过后执行操作
    }
  }else{
    //验证失败后执行操作
    //return false;
  }
}