Vue的表单验证

 <el-form ref="formR" :rules="rule" :model="formR">
      <el-form-item prop="param1">
        <el-input v-model="formR.param1" placeholder="请输入"></el-input>
      </el-form-item>
</el-form>

script:

data() {
      return {
       formR:{},
        rule:{
          param1:[
            { required: true, message: "字段不能为空", trigger: "change" }
              {
              pattern: /^([0-9a-zA-Z]*)$/,
              message: "牧户编号由数字和字母组成",
              trigger: "change"
            }
          ]
        },
 		}
 }		

其中，required是是否需要填数据,如果是true则必须填数据,否则会提示message后的字段,并且提交不成功,tigger后面跟的是触发情况,如果是change则代表改变的时候就检验下,还有一种是blur,表示当失去焦点时检验,这里推荐用change.
其次,这里的pattern代表检验输入是否符合后面的正则表达式.