vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > element-plus el-form表单验证

element-plus el-form表单验证使用方法以及注意事项

作者：柑橘乌云_

这篇文章主要给大家介绍了关于element-plus el-form表单验证使用方法以及注意事项的相关资料,表单验证能通过设置验证规则验证用户的输入,并对不规范的输入做出对应提示,文中通过代码介绍的非常详细,需要的朋友可以参考下

element-plus@2.0.6 及之后的版本，表单验证不再是同步执行的了

另外，element-plus@2.1.4 及之后的版本，才可按照官方文档示例正常使用（使用的是两者的中间版本的话，最好先自行确认下正确的

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!') // 位置1
    } else {
      console.log('error submit!', fields)
    }
  })
  // 位置2
}

上例中：

如果在“位置1”执行表单验证通过后的业务代码，可以去掉 async...await

如果在“位置2”执行，则需加上。否则，会直接跳过验证

这样，与异步校验（三、6）的使用办法就一致了，两者可以取其一。element-plus@2.1.4及之后的推荐统一使用上例中的写法

表单定义规则

//表单验证规则 
const rules = reactive({
  name: [{ validator: checkName, trigger: ['blur', 'change'],required: true}],
  phone: [{ type: number, validator: checkPhone, trigger: ['blur', 'change'] }],
  password: [{ validator: checkpassword, trigger: ['blur'] }],
})

el-form配置

<el-form :model="formData" :rules="rules" ref="baseForm"></el-form>

上一步已经为表单绑定了规则列表formData，接下来，只需要在form-item中使用prop绑定验证规则即可

<el-form-item label="电话" style="width: 40%" prop="phone">
   <el-input v-model="formData.phone" type="text" autocomplete="off" disabled />
</el-form-item>

对应关系:

另外，验证嵌套属性可以通过 . 连接绑定：

完整demo

<template>
    <el-form :model="formData" :rules="rules" ref="ruleFormRef" status-icon label-width="120px" size="large">
        <el-form-item label="姓名" style="width: 40%" prop="name">
          <el-input v-model="form.name" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" style="width: 40%" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" :value=1 />
            <el-option label="女" :value=0 />
          </el-select>
        </el-form-item>
        <el-form-item label="生日" style="width: 40%" prop="birthday">
          <!-- <el-input v-model="form.birthday" type="text" autocomplete="off" /> -->
          <el-date-picker v-model="form.birthday" type="date" placeholder="请选择生日!" style="width: 100%"
            value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="电话" style="width: 40%" prop="phone">
          <el-input v-model="form.phone" type="text" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="密码" style="width: 40%" prop="password">
          <el-input v-model="form.password" type="password" autocomplete="off" show-password />
        </el-form-item>
      </el-form>
</template>

<script setup>
let formData = reactive({
  birthday: '',
  name: '',
  phone: '',
  sex: 1,
  password: ''
})
// 验证函数
const checkPhone = (rule, value, callback) => {
  console.log(value);
  if (!Number.isInteger(Number(value))) {
    return callback(new Error('请输入数字！'))
  } else if (String(value).length != 11) {
    return callback(new Error('您输入的手机位数不是11位！'))
  } else {
    callback()
  }
}
// 验证函数
const checkpassword = (rule, value, callback) => {
  console.log(value);
  if (String(value).length > 12) {
    return callback(new Error('您输入的密码过长！长度不超过12位'))
  } else {
    callback()
  }
}
// 验证函数
const checkName = (rule, value, callback) => {
  if (value.length > 8) {
    return callback(new Error('您输入的姓名过长！'))
  } else {
    callback()
  }
}
//表单验证规则 
const rules = reactive({
  name: [{ validator: checkName, trigger: ['blur', 'change'] }],
  phone: [{ type: number, validator: checkPhone, trigger: ['blur', 'change'] }],
  password: [{ validator: checkpassword, trigger: ['blur'] }],
})

</script>

配置项以及其可选的值

（详细文档链接）

Rules API:

type: string, number, boolean, method, regexp, integer, float, array, object, enum, date, url, hex, email, any

required:必填/非必填

message: 错误提示

pattern: 值需校验通过的正则表达式

min, max: type为array, string时，指长度。为number时，指大小

len: type为array, string时，指长度。为number时，指值

enum: 例：{ type: 'enum', enum: ['admin', 'user', 'guest'] }

fields: 对象的属性名，数组的下标

defaultField: 应用于对象、数组内的所有成员

transform: 方法，对值的预处理

validator: 自定义验证方法

asyncValidator: 自定义异步验证方法

trigger: 触发验证的方法，值可用字符串’blur’, ‘change’，也可是数组[‘blur’, ‘change’]

注意，规则数组是按序逐一被执行验证的（trigger='blur’时，更改input框的值不会触发验证）

进阶

单项验证

可在表单的项 ( < el-form-item > ) 中单独设置验证规则

<el-form-item label="邮箱：" prop="email"
  :rules="[{ type: 'email', message: '邮箱格式错误', trigger: 'change' }]"
></el-form-item>

简写：

<el-form-item label="姓名：" prop="username" required />

对于字符串的非空校验，element plus表单验证提供了一种简单的方式（能实现校验，但有很大局限性，而且提示语是英文）

为了代码的可维护性与美观，尽量不要将规则写在模板中。但某些情况下必须如此，比如，当需要额外传递参数给validator时：

<el-form-item label="样本类型：" prop="sampType"
    :rules="[{ validator: (rule, value, cb) => validateSampType(rule, value, cb, yourParams), trigger: 'change' }]"
></el-form-item>

正则校验

//regex.js
// 手机号或座机号
export const reg_tel_phone = /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/

//doctor.vue
import { reg_tel_phone } from '@/assets/regex'
rules: {
  name: [{ required: true, message: '请输入医生名称', trigger: 'blur' }],
  title: [{ required: true, message: '请选择职称', trigger: 'change' }],
  tel: [{ pattern: reg_tel_phone, message: '请输入正确的手机号或座机号', trigger: ['blur', 'change'] }]
},

注意：直接在vue模板中进行单项验证使用正则校验时，需将RegExp定义成响应式变量。

总结

到此这篇关于element-plus el-form表单验证使用方法以及注意事项的文章就介绍到这了,更多相关element-plus el-form表单验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文