element-ui表单验证

在使用表单校验时，需要注意： 

       ！！！如果校验不通过时，是不能够进行提交的，就算提交了也是没有值的 

所以先来说一下表单提交submit事件中，需要进行判断,如果valid有值能够提交，否则不能够进行提交。

$refs是用来获取表单的元素，可以使用点语法，也可以使用中括号的形式，拿的内容是ref的内容

 <el-form :model="form" :rules="rules" ref="formItem" label-width="100px" class="demo-ruleForm">

 submitForm () {
      // 表单验证不通过的话，需要给提示不通过，不能够进行提交
      // $refs获取到表单元素
      this.$refs.formItem.validate((valid) => {
        if (valid) {
          alert('提交成功')
        } else {
          console.log('表单验证不通过!!')
          return false
        }
      })
    }

element-ui文档中虽然存在一些验证规则，但是不是特别全，因此现在单拎出来说一说~

表单验证规则： 

一、必填选项

  {

            required: true, message: '分类名称必填', trigger: 'blur'

          }

required为true为必填，message为提示语句，trigger为触发时机，可以为blur也可以为change 

二、范围验证

   {

            min:3,

            max:5,

            message:'长度必须在3-5之间'

          }

最小值为3 ，最大值为5 ，提示语句message

三、数据类型校验 

 {

            type:'array',

            message:'xxxx'

           }

type表示类型（首字母小写），message表示提示语句

四、 正则校验

{

            pattern: /[a-z]\w{3,7}/,

            message: '必须是4-8位的数字英文下画线,以字母开头'

          },

pattern 表示正则表达式的规则 

五、自定义校验规则 

 首先在rules中进行定义

{ validator: catename, trigger: 'blur' }

validator就是定义了一个变量名，然后去data中书写这个变量，data是一个函数，函数中自然能够定义变量：

  value 校验时这个字段值 rule 当前 字段所有校验规则  callback 校验通过不需要传参直接调用，校验不通过需要写提示语句

 data () {
    const catename = (rule, value, callback) => {
      if (value !== '1234') {
        return callback(new Error('值不等于1234'))
      } else {
        callback()
      }
    }
return{
  form: {
        cateName: '',
        pid: '1111',
        enAbled: 0
      }
   },
 rules: {
        cateName: [
          {
            required: true, message: '分类名称必填', trigger: 'blur'
          },
          { validator: catename, trigger: 'blur' }

        ]
}