在vue中使用rules对form表单字进行验证

小聪_

2446人浏览 · 2022-09-22 15:55:40

小聪_ · 2022-09-22 15:55:40 发布

1. 在data中验证

2.行内表单验证

3.引入外部规则定义表单验证

1. 在data中验证

表单内容

<!-- 表单 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="用户名:" prop="userName">
       <el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
    </el-form-item>
</el-form>

字段释义

1.<el-form>：代表这是一个表单
2.<el-form> -> ref：表单被引用时的名称，标识
3.<el-form> -> rules：表单验证规则
4.<el-form> -> model：表单数据对象
5.<el-form> -> label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值
6.<el-form> -> <el-form-item>：表单中的每一项子元素
7.<el-form-item> -> label：标签文本
8.<el-form-item> -> prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下为必填属性
9.<el-input>：输入框
10.<el-input> -> v-model：绑定的表单数据对象属性
11.<el-input> -> style：行内样式
12.<el-input> -> maxlength：最大字符长度限制

data数据

data() {
    return {
        // 省略别的数据定义
        ...
        
        // 表单验证
        formRules: {
            userName: [
                {required: true,message: "请输入用户名称",trigger: "blur"}
            ]
        }
    }
}

字段释义

1.formRules：与上文 '表单内容' 中 <el-form> 表单的 :rules 属性值相同
2.userName：与上文 '表单内容' 中 <el-form-item> 表单子元素的 prop 属性值相同
3.验证内容是：必填，失去焦点时验证，如果为空，提示信息为 '请输入用户名称'

2.行内表单验证

<!-- 表单 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="用户名:" prop="accountName" :rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]">
        <el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/>
    </el-form-item>
</el-form>

3.引入外部规则定义表单验证

表单内容

<!-- 表单 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="银行卡号:" prop="accountNumber">
       <el-input v-model="rulesForm.accountNumber" style="width:300px" maxlength="19"/>
    </el-form-item>
</el-form>

js内容

<script>
// 引入了外部的验证规则
import { validateAccountNumber } from "@/utils/validate";
 
// 判断银行卡账户是否正确
const validatorAccountNumber = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入账户信息"));
  } else {
    if (validateAccountNumber(value)) {
      callback();
    } else {
      return callback(new Error('账号格式不正确'))
    }
  }
};
 
export default {
    data() {
        return {
           
        
            // 表单验证
            formRules: {
                accountNumber: [
                    {required: true,validator: validatorAccountNumber,trigger: "blur"}
                ]
            }
        }
    }
}
</script>

字段释义

1.import：先引入了外部的验证规则
2.const：定义一个规则常量，常量名可变， '= (rule, value, callback) => {}' 为固定格式，value 入参为验证的字段值
3.formRules -> accountNumber：表单验证中使用 validator 指定自定义校验规则常量名称
validdate.js

/* 银行账户 */
export function validateAccountNumber(str) {
  const reg = /^([1-9]{1})(\d{14}|\d{18})$/
  return reg.test(str)
}

以上都是失焦验证，下面是按钮提交验证

表单的提交按钮

<!-- 表单 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item>
        <el-button type="primary" @click="onSubmit('rulesForm')">保存</el-button>
        <el-button @click="cancel">取消</el-button>
    </el-form-item>
</el-form>

字段释义

1.<el-button>：按钮
2.<el-button> -> type：按钮类型
3.<el-button> -> @click：按钮点击时触发的事件，这里注意方法的入参为 'rulesForm'，这里要与表单的 rel 属性值一致

methods方法

methods: {
    // 保存
    onSubmit(formName) {
        this.$refs[formName].validate(valid => {
            if (valid) {
                console.log("success submit!!");
            }else{
                console.log("error submit!!");
            }
        });
    },
    // 取消
    cancel() {
        
    }
}