avue表单验证的多种方法

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 12天，点击查看活动详情

在项目中使用Avue框架搭建表单时经常会用到验证，限制用户输入，今天就整理一下我在项目中的常用方法。

我在项目中中最常用的就是关于必填内容的验证。

<avue-form :option="option" @submit="submit" @error="error"></avue-form>

<script>
export default {
    data() {
      return {
        option:{
          column:[
             {
              label:'姓名',
              prop:'name',
              rules: [{
                required: true,
                message: "请输入姓名",
                trigger: "blur"
              }]
            }, {
              label:'性别',
              prop:'sex',
              rules: [{
                required: true,
                message: "请输入性别",
                trigger: "blur"
              }]
            }
          ]
        },
      };
    },

在option的column配置项中添加rules。required: true表示必填，表单前会默认显示红色星号。希望显示星号去掉此项即可。message为提示信息。

外置验证

当希望点击某个按钮后对表单内容进行验证时，就使用到外置验证。

<el-button size="small" @click="validate">验证表单</el-button>
<avue-form ref="form" :option="option" ></avue-form>

 validate(){
   
        this.$refs.form.validate((valid, done,msg) => {
          if (valid) {
            done()
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      }
    }

注意form一定要绑定ref值，通过ref获取表单实例， this.$refs.form.validate((valid, done,msg) => {} avue自带的validate回调函数，valid表示是否验证通过，一般项目里用if判断后执行提交操作，如果存在验证不通过，msg为错误信息。

自定义验证

当验证条件较为复杂时，就需要自定义验证了。比如希望验证长度。 在data中定义一个函数，column的rules的validator对应这个函数名，message为空，不满足条件就callback(new Error('xxxx')); 满足条件就callback（）为空。

data() { 
var validatelength = (rule, value, callback) => {
if (this.selectSourList.length==0) {
callback(new Error('至少选择一项资源')); 
} else { callback(); } }

column: [ { 
label: "选择",
prop: "houseNum", 
rules: [{ required: true,
message: "", 
validator: validatelength, 
trigger: "blur" }], },

通过正则表达式验证内容

比如验证手机号码是否正确，在column的rules的pattern 写上正则表达式即可。

{ label: "联系方式",
prop: "chargePersonPhone",
rules: [{ /
/ required: true, //不显示星号
pattern: /1[3,4,5,7,8][0-9]{9}$/, 
message: "请输入正确的联系方式", 
trigger: "blur" }] },

官网中的案例avuejs.com/form/form-r…