vue表单验证

vue单个表单验证

<template>
    <div>
        <el-form :model="form" :rules="rules" ref="form>
            <el-form-item label="名称" prop="name">
                <el-input v-model.trim="form.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
                <el-input type="password" v-model.trim="form.pwd" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login('form')">登录</el-button>
                <el-button @click="cancel('form')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                form: {
                    name:'',
                    pwd: ''
                },
                rules: {
                    name: [{required: true, message: '请输入名称', trigger: ['blur', 'change']}],
                    pwd: [{required: true, message: '请输入密码', trigger: ['blur', 'change']}]
                }
            }
        },
        methods: {
            // 登录表单验证
            login(formName) {
                this.$refs[formName].validate( valid => {
                    if(valid) {
                        // 表单验证通过
                    }
                })
            },
            // 重置表单
            cancel(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

vue提交多个表单，如何进行表单验证？

当需要提交多个表单验证时，需分步验证，以两个表单为例，js逻辑如下：

export default {
    data() {
        return {
            baseform: {},
            advanceform: {}
        }
    },
    methods: {
        // 表单验证最后提交事件
        finished() {
            const p1 = new Promise((resolve, reject) => {
                this.$refs['baseform'].validate( valid => {
                    if(valid) {
                        resolve()
                    }
                })
            })
 
            const p2 = new Promise((resolve, reject) => {
                this.$refs['advanceform'].validate( valid => {
                    if(valid) {
                        resolve()
                    }
                })
            })
 
            Promise.all([p1, p2]).then( () => {
                // 表单验证通过，写业务代码
            })
        }
    }
}

vue表单单独对一个字段验证

<template>
    <div>
        <el-form :model="form" :rules="rules" ref="form>
            <el-form-item label="名称" prop="name">
                <el-input v-model.trim="form.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="des">
                <el-input type="textarea" v-model.trim="form.des" placeholder="描述"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="create('form')">创建</el-button>
                <el-button @click="cancel('form')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                form: {
                    name:'',
                    des: ''
                },
                rules: {
                    name: [{required: true, message: '请输入名称', trigger: ['blur', 'change']}]
                }
            }
        },
        methods: {
            // 创建表单验证
            create(formName) {
                this.$refs[formName].validateField('name', valid => {
                    if(valid) {
                        // 表单验证通过
                    }
                })
            },
            // 重置表单
            cancel(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

行内验证

表单内容： <!-- 表单 --> 
<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>

外部引入自定义校验(validator)

【validate.js】中自定义邮箱验证规则

/* 电子邮箱校验 */
export function validateEmail(str) {
  const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
  return reg.test(str)
}

<script>
import axios from "axios";
// 引入了外部的验证规则
import { validateEmail } from "../assets/js/validate.js";
 
// 判断邮箱是否正确
const validatorEmail = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("邮箱不能为空"));
  } else {
    if (validateEmail(value)) {
      callback();
    } else {
      return callback(new Error('邮箱格式不正确'))
    }
  }
};
 
export default {
  name: "login",
  data() {
    return {
      activeName: "login",
      checked: false,
      user: {
        username: "",
        password: ""
      },
      // 通过 formRules 属性传入约定的验证规则
      formRules: {
        username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { type: 'string', min: 6, message: '密码不能小于6位', trigger: 'blur' }
        ],
        email: [{ required: true, validator: validatorEmail, trigger: "blur" }]
      },
 
    };
 
  },
}