美文网首页
vue+element-ui自定义正则验证

vue+element-ui自定义正则验证

作者: who_are_you_ | 来源:发表于2020-04-23 10:58 被阅读0次

    已邮箱验证为例:

    <template>
            <div>
                    <el-form  ref='form' :rules="rules" :model="form" >
                              <el-input v-model='form.email' placeholder='请输入邮箱'></el-input>
                    </el-from>
            </div>
    </template>
    <script>
    export default {
              data() {
                    // 在这里写正则表达式验证
                    let isEmail = (rule, value, callback) => {
                          if (value.length > 0) {
                                const reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/i;
                                 return reg.test(value) ? callback() : callback(new Error(`${value}邮箱格式不合法`));
                          } else {
                                 return callback(new Error(`请输入邮箱`));
                          }
                    }
                    return {
                            form: {
                                    email: ''
                            },
                            // 验证规则
                            rules: {
                                  namelist: [
                                          { validator: isemail, trigger: ['blur', 'change'] }
                                   ]
                            }
                    };
              }
    }
    <script>
    <style>
    <style>
    

    相关文章

      网友评论

          本文标题:vue+element-ui自定义正则验证

          本文链接:https://www.haomeiwen.com/subject/xndoihtx.html