精华内容
下载资源
问答
  • 表单校验
    2022-03-21 21:25:48

    我们尝试通过一个案例对Element的表单校验进行一下补充

    实现表单基本结构

    创建项目

    $ vue create login

    选择babel / eslint

    安装Element

    开发时依赖 : 开发环境所需要的依赖 -> devDependencies

    运行时依赖: 项目上线依然需要的依赖 -> dependencies

    $ npm i element-ui

    在main.js中对ElementUI进行注册

    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);

    接下来,利用Element组件完成

    代码如下

    <template>
      <div id="app">
        <!-- 卡片组件 -->
        <el-card class='login-card'>
          <!-- 登录表单 -->
          <el-form style="margin-top: 50px">
            <el-form-item>
              <el-input placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%">登录</el-button>
            </el-form-item>
    ​
          </el-form>
        </el-card>
      </div>
    </template>
    ​
    <script>
    ​
    export default {
      name: 'App',
      components: {
    ​
      }
    }
    </script>
    ​
    <style>
     #app {
       width: 100%;
       height: 100vh;
       background-color: pink;
       display: flex;
       justify-content: center;
       align-items: center;
     }
     .login-card {
       width: 440px;
       height: 300px;
     }
    </style>
    ​

    表单校验的先决条件

    接下来,完成表单的校验规则

    model属性 (表单数据对象)

      data () {
        // 定义表单数据对象
        return {
          loginForm: {
            mobile: '',
            password: ''
          }
        }
      }

    绑定model

     <el-form style="margin-top:40px" :model="loginForm" >

    rules规则 先定义空规则,后续再详解

    loginRules: {}
    <el-form style="margin-top: 50px" model="loginForm" :rules="loginRules">

    设置prop属性

    校验谁写谁的字段

    <el-form-item prop="mobile">
       ...
    <el-form-item prop="password">
       ...

    给input绑定字段属性

    <el-input v-model="loginForm.mobile"></el-input>
    <el-input v-model="loginForm.password"></el-input>

    表单校验规则

    此时,先决条件已经完成,要完成表单的校验,需要编写规则

    ElementUI的表单校验规则来自第三方校验规则参见 async-validator

    我们介绍几个基本使用的规则

    规则说明
    required如果为true,表示该字段为必填
    message当不满足设置的规则时的提示信息
    pattern正则表达式,通过正则验证值
    min当值为字符串时,min表示字符串的最小长度,当值为数字时,min表示数字的最小值
    max当值为字符串时,max表示字符串的最大长度,当值为数字时,max表示数字的最大值
    trigger校验的触发方式,change(值改变) / blur (失去焦点)两种,
    validator如果配置型的校验规则不满足你的需求,你可以通过自定义函数来完成校验

    校验规则的格式

    { key(字段名): value(校验规则) => [{}] }

    根据以上的规则,针对当前表单完成如下要求

    手机号 1.必填 2.手机号格式校验 3. 失去焦点校验

    密码 1.必填 2.6-16位长度 3. 失去焦点校验

    规则如下

          loginRules: {
            mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
            password: [{ required: true, message: '密码不能为空', trigger: 'blur' }, {
              min: 6, max: 16, message: '密码应为6-16位的长度', trigger: 'blur'
            }]
          }

    自定义校验规则

    自定义校验规则怎么用

    validator是一个函数, 其中有三个参数 (rule(当前规则),value(当前值),callback(回调函数))

    var  func = function (rule, value, callback) {
        // 根据value进行进行校验 
        // 如果一切ok  
        // 直接执行callback
        callback() // 一切ok 请继续
        // 如果不ok 
        callback(new Error("错误信息"))
    }

    根据以上要求,增加手机号第三位必须是9的校验规则

    如下

    // 自定义校验函数
        const checkMobile = function (rule, value, callback) {
          value.charAt(2) === '9' ? callback() : callback(new Error('第三位手机号必须是9'))
        }
    ​
     mobile: [
              { required: true, message: '手机号不能为空', trigger: 'blur' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }, {
                trigger: 'blur',
                validator: checkMobile
       }],

    手动校验的实现

    最后一个问题,如果我们直接点登陆按钮,没有离开焦点,那该怎么校验 ?

    此时我们需要用到手动完整校验 案例

    form表单提供了一份API方法,我们可以对表单进行完整和部分校验

    方法名说明参数
    validate对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promiseFunction(callback: Function(boolean, object))
    validateField对部分表单字段进行校验的方法Function(props: array | string, callback: Function(errorMessage: string))
    resetFields对整个表单进行重置,将所有字段值重置为初始值并移除校验结果
    clearValidate移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组,如不传则移除整个表单的校验结果Function(props: array | string)

    这些方法是el-form的API,需要获取el-form的实例,才可以调用

    采用ref进行调用

    <el-form ref="loginForm" style="margin-top:40px" :model="loginForm" :rules="loginRules">
    ​

    调用校验方法

      login () {
          // 获取el-form的实例
          this.$refs.loginForm.validate(function (isOK) {
            if (isOK) {
              // 说明校验通过
              // 调用登录接口
            }
          }) // 校验整个表单
        }

    Async 和 Await

    针对异步编程,我们学习过Ajax的回调形式,promise的链式调用形式

    ajax回调模式

    // 回调形式调用
    $.ajax({
        url,
        data,
        success:function(result){
            $.ajax({
                data:result,
                success: function(result1){
                    $.ajax({
                        url,
                        data: result1
                  })
                }
            })
        }
    })

    promise的链式回调函数

    // 链式调用 没有嵌套
    axios({ url, data}).then(result => {
        return  axios({ data:result }) 
    }).then(result1 => {
         return  axios({ data:result1 }) 
    }).then(result2 => {
       return axios({ data: result2 }) 
    }).then(result3 => {
        return axios({ data: result3 }) 
    })

    关于Promise你必须知道几件事

    关于Promise你必须知道几件事

    如何声明一个Promise

    new Promise(function(resolve, reject){ })

    如果想让Promise成功执行下去,需要执行resolve,如果让它失败执行下去,需要执行reject

    new Promise(function(resolve, reject) { 
        resolve('success')  // 成功执行
    }).then(result => {
        alert(result)
    })
    ​
    new Promise(function(resolve, reject) { 
        reject('fail')  // 成功执行
    }).then(result => {
        alert(result)
    }).catch(error => {
         alert(error)
    })

    如果想终止在某个执行链的位置,可以用Promise.reject(new Error())

    new Promise(function(resolve, reject) {
        resolve(1)
    }).then(result => {
        return result + 1
    }).then(result => {
        return result + 1
    }).then(result => {
      return  Promise.reject(new Error(result + '失败'))
       // return result + 1
    }).then(result => {
        return result + 1
    }).catch(error => { 
        alert(error)
    })

    异步编程的终极方案 async /await

    async 和 await实际上就是让我们像写同步代码那样去完成异步操作

    await 表示强制等待的意思,await关键字的后面要跟一个promise对象,它总是等到该promise对象resolve成功之后执行,并且会返回resolve的结果

     async test () {
          // await总是会等到 后面的promise执行完resolve
          // async /await就是让我们 用同步的方法去写异步
          const result = await new Promise(function (resolve, reject) {
            setTimeout(function () {
              resolve(5)
            }, 5000)
          })
          alert(result)
        }

    上面代码会等待5秒之后,弹出5

    async 和 await必须成对出现

    由于await的强制等待,所以必须要求使用await的函数必须使用async标记, async表示该函数就是一个异步函数,不会阻塞其他执行逻辑的执行

    async test () {
          const result = await new Promise(function(resolve){  
             setTimeout(function(){
                 resolve(5)
             },5000)
           })
           alert(result)
        },
        test1(){
          this.test()
          alert(1)
        }

    通过上面的代码我们会发现,异步代码总是最后执行,标记了async的函数并不会阻塞整个的执行往下走

    如果你想让1在5弹出之后再弹出,我们可以这样改造

       async test1(){
         await this.test()
          alert(1)
       }
    // 这充分说明 被async标记的函数返回的实际上也是promise对象

    如果promise异常了怎么处理?

    promise可以通过catch捕获,async/ await捕获异常要通过 try/catch

       async  getCatch () {
          try {
            await new Promise(function (resolve, reject) {
              reject(new Error('fail'))
            })
            alert(123)
          } catch (error) {
            alert(error)
          }
       }

    async / await 用同步的方式 去写异步

    更多相关内容
  • 表单校验之难 如果要问微信小程序最难实现的公共业务是什么?应该是表单校验,没有之一。原因如下: 表单组件在数量上达到11个,居各类组件之首。当然幸运的是,并不是所有的都需要校验。 而这些组件操作方式多样,...
  • 表单校验功能:   实现这个功能,总共分为以下4布: 1.在el-form标签中定义:rules=”rules”;ref=”reference” 2.在el-form-item定义prop=”name”; 3.在选项data中定义rules校验规则; 4.在提交方法中检查用户行为 ...
  • 微信小程序最难实现的公共业务是什么?应该是表单校验,这篇文章主要介绍了微信小程序如何实现表单校验功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了vue elementUI 表单校验(数组多层嵌套)功能的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from....
  • 今天主要记录一下用vee-validate来进行表单校验的几个基本使用。包括最基础的必填和长度校验;异步请求服务的校验(重名校验),还有延迟校验。如何引入等就不在这里赘述了,直接进入主题。 1.必填和长度校验 直接...
  • 有个统计时段的字段,需排除选择的时间范围不能与已有时间段重叠
  • 原生JS经典小项目-form表单校验
  • vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息。它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开箱即用,还支持自定义...
  • 目录表单校验插件1. 导入插件2. 基础语法3. 常用校验规则4. 校验案例a. 主要需求b. HTML 素材页面c. 实现表单检验 表单校验插件 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,...
  • 2.表单校验插件validator的基本语法 在rules中通过校验规则名称使用校验规则 ,在messages中定义该规则对应的错误提示信息。 <!-- 需要引入的文件 --> [removed][removed] [removed][removed] <
  • 主要介绍了使用100行代码实现vue表单校验功能,本文通过实例截图给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息。这篇文章给大家带来了Vue.js 使用 Vee-validate 实现表单校验的相关知识,感兴趣的朋友一起看看吧
  • vee-validate使用教程 本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释。本人也是一边学习一边使用,如果错误之处敬请批评指出* 一、安装 npm install vee-validate@...
  • 表单校验插件.zip,表单校验插件,jquery.validate.js,jquery-1.11.1.js,messages_zh.js
  • 依赖jQuery的表单校验脚本,在使用此脚本之前请先引入jQuery文件
  • 1、步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据&...2、完成注册页面表单校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
  • ElementUI实现表单校验

    千次阅读 2022-03-28 21:31:57
    步骤 1.给表单el-form添加校验规则字段rules并动态绑定一个对象(对象可自定义,我这里定义为rules) 2.在script里面加入rules对象,并将要校验的字段写进去,格式固定 #eg:message的值可以...上述三步操作表单校验

    步骤

    1.给表单el-form添加校验规则字段rules并动态绑定一个对象(对象可自定义,我这里定义为rules)
    2.在script里面加入rules对象,并将要校验的字段写进去,格式固定

    #eg:message的值可以自定义,blur表示表单失去焦点触发校验
    username:[{required:true,message:'请输入用户名',trigger:'blur'}],
    

    3.添加prop属性,在对应的el-form-item标签上我们让prop等于rules里面对应的字段值
    上述三步操作表单校验功能已经有了,如果想添加点击事件,通过提交来向用户显示校验结果,我们可以继续执行以下步骤:
    4.给el-form添加ref属性,属性值可自定义,例如loginForm
    5.给button按钮添加一个点击事件
    6.在methods方法里面实现点击事件
    7.通过this.$refs.loginForm.validate()处理校验结果(loginForm是第四步中的属性值)

    代码详情

    <template>
      <div>
      <!--1.加上rules属性即开启表单验证规则,rules动态绑定了一个对象,对象在script里面定义,对象里面包含的是要验证的表单字段-->
      <!--4.ref相当于给了el-form一个验证的时候使用的唯一名称-->
      <!--model让表单动态绑定一个数据对象-->
      
        <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
        <h3 class="loginTitle">系统登录</h3>
        
        <!--3.prop的值与rules里面要验证的字段值是对应的,在对应的标签上我们让prop等于rules里面对应的字段值-->
        <el-form-item prop="username">
          <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入用密码"></el-input>
        </el-form-item>
        <!--5.@click绑定了一个点击事件-->
          <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
        </el-form>
      </div>
    </template>
    <script>
        export default {
            name: "Login",
            data(){
              return {
                loginForm: {
                  username: 'admin',
                  password: '123',
                },
                //2.我们把要进行验证的字段都放进rules对象里
                rules:{
                  username:[{required:true,message:'请输入用户名',trigger:'blur'}],
                  password:[{required:true,message:'请输入密码',trigger:'blur'}],
                }
              }
            },
          methods:{
              //6.点击事件
              submitLogin() {
              //7.
              //这里refs.后面的loginForm与el-form表单中的ref属性值是对应的
              //validate:对整个表单进行校验的方法,参数为一个回调函数。这里给了一个返回值valid,为Boolean类型,表示校验是否成功
              
                this.$refs.loginForm.validate((valid)=>{
                  if (valid){
                    this.$message({
                      message: '登录成功!',
                      type: 'success'
                    });
                  }else{
                    this.$message.error('登录失败!')
                    return false;
                  }
                })
              }
          }
        }
    </script>
    <style scoped>
    .loginContainer{
      border-radius:15px ;
      background-clip:padding-box ;
      margin: 180px auto;
      padding: 15px 35px;
      background: white;
      border: 1px solid #eaeaea;
      box-shadow:0 0 25px #cac6c6 ;
      width: 350px;
    
    }
      .loginTitle{
        margin: 2px auto 20px auto;
        text-align: center;
      }
      .rememberMe{
        width: 100%;
        margin: 9px auto;
      }
    </style>
    
    展开全文
  • 主要介绍了vue elementUI 表单校验的实现代码(多层嵌套),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了Vue element-ui父组件控制子组件的表单校验操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验。网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的...
  • 笔者近期在公司的项目中使用自定义指令完成了表单校验。 这里将思路分享给大家,并写了一个小demo。这个自定义指令还需要大家自行完善。 demo可见Github:vue-form-param-check 首先关于自定义指令的介绍可以参考官网...
  • 本文实例为大家分享了Angular模板表单校验的方法,供大家参考,具体内容如下 1. 创建指令 ng g directive directives/mobileValidator  2. html <form #myForm=ngForm (ngSubmit)=onSubmit2(myForm.value, ...
  • Vue.js 表单校验插件

    2020-10-21 17:58:00
    主要介绍了Vue.js 表单校验插件的相关资料,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 107,009
精华内容 42,803
关键字:

表单校验

友情链接: 播放声音.rar