vue 表单自定义校验方法

ゝ一世哀愁。 2022-05-13 14:04 442阅读 0赞

所用组件：Element UI

直接上代码

<el-form :model="editForm" :rules="editFormRules">
         <el-form-item :label="角色名" prop="roleName">
              <el-input v-model="editForm.roleName"></el-input>
         </el-form-item>
    </el-form>
    
    <script>
      export default {
        data () {
            let checkIsNull = (rule, value, callback) => {
                 var l =  value.trim();
                 if(l==0) {
                     callback(new Error('含有非法字符'))
                 } else {
                     callback()
                 }
    
            };
            return {
                editForm: {           
                    roleName: '',
                },
                editFormRules: {
                    roleName: [
                        { required: true, message: '请输入角色名', trigger: 'blur' },
                        { min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur' },
                    //前两个是自带校验规则，下面这个是自定义checkIsNull为一个方法，当校验时会自动执行此方法。checkIsNull写在data里 return之前
                        { validator: checkIsNull, trigger: 'blur' }
                    ] 
                }           
            }
         }
        
      }

结语：本人所有文章都立志写的简单易懂，戳中问题点。 当然了，简单的同时可能忽略了很多细节与详细，如有不足的地方，还请谅解并指出。  如对文章或实现技术上有问题，可联系我：qq: 1226500260     邮箱：654868284@qq.com

发表评论取消回复

表情：

评论列表（有 0 条评论，442人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue表单rules校验

文章目录一、表单校验 1. 表单项校验 2. 表单整体校验二、规则模板三、踩坑合集 1. 单项规则校验没问题

你的名字/ 2023年09月30日 09:59/ 0 赞/ 31 阅读

相关 Vue使用ElementUI对表单元素进行自定义校验

前言在使用ElementUI的表单元素时候，除了做一些简单的非空处理校验，在一些特殊的场合，还需要我们做一些自定义校验。其实ElementUI不仅提供了基本的非空校

蔚落/ 2023年09月24日 19:41/ 0 赞/ 87 阅读

相关 Iview 自定义表单校验

1、定义方法method下面 validateAge(rule, value, callback)\{ console.log(1); if (!value) \{

Bertha 。/ 2023年06月12日 08:39/ 0 赞/ 178 阅读

相关 element-ui 表单自定义日期输入校验

methods: \{ validateDate(rule, value, callback){ if (value) {

冷不防/ 2023年06月04日 12:51/ 0 赞/ 29 阅读

相关 layui自定义表单校验

layui表单元素的校验只需在元素上加入lay-verify，layui提供了以下值。 <table> <tbody> <tr> <td> <p>1</p>

向右看齐/ 2022年12月13日 04:48/ 0 赞/ 427 阅读

相关 element-ui自定义表单校验规则及常用表单校验

前言表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。

妖狐艹你老母/ 2022年12月11日 07:58/ 0 赞/ 403 阅读

相关 vue element form 自定义校验1(表单校验)

通过`ref`属性获得表单对象,调用表单对象的`validate`函数进行表单的整体校验 <template> <!--model绑定整个form对象的的

逃离我推掉我的手/ 2022年10月30日 00:33/ 0 赞/ 51 阅读

相关 VUE表单校验，金额

rules: { money: [ { required: true, message: '请输入金额', trig

灰太狼/ 2022年09月08日 03:46/ 0 赞/ 253 阅读

相关 layui自定义表单校验

自定义一个金额的校验 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

雨点打透心脏的1/2处/ 2022年06月03日 01:58/ 0 赞/ 461 阅读

相关 vue 表单自定义校验方法

所用组件：Element UI 直接上代码 <el-form :model="editForm" :rules="editFormRules">

ゝ一世哀愁。/ 2022年05月13日 14:04/ 0 赞/ 443 阅读