zoukankan      html  css  js  c++  java
  • Vue手机号邮箱验证

    直接上代码

            <el-form-item label=" " prop="phone" :rules="checkPhone">
                          <el-input
                            v-model="modelForm.phone"
                            placeholder="请输入手机号"
                          >
                            <template slot="prepend">手机号</template>
                          </el-input>
                        </el-form-item>    
            <el-form-item label=" " prop="email" :rules="checkEmail">
                          <el-input
                            v-model="modelForm.email"
                            placeholder="请输入邮箱"
                          >
                            <template slot="prepend">邮箱</template>
                          </el-input>
                        </el-form-item>    
     data() {
        var checkOnePhone = (rule, value, callback) => {
          if (value && value != "") {
            if (!/^1(3|4|5|6|7|8|9)d{9}$/.test(value)) {
              callback(new Error("请输入正确的手机号"));
            } else {
              callback();
            }
          } else {
            callback();
          }
        };
        var checkEmail = (rule, value, callback) => {
          if (value && value != "") {
            if (
              !/^([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/.test(
                value
              )
            ) {
              callback(new Error("请输入正确的邮箱"));
            } else {
              callback();
            }
          } else {
            callback();
          }
        };
        return {...
            
    checkPhone: [
            { required: true, validator: checkOnePhone, trigger: "blur" }
          ],
          checkEmail: [{ required: true, validator: checkEmail, trigger: "blur" }],
     
        ....
    }}
  • 相关阅读:
    HTML <a> 标签的 target 属性
    CSS display 属性
    test
    ubuntu开启ssh服务
    Ubuntu各个版本的介绍
    Ubuntu和RedHat的区别
    黑苹果Mac系统快捷键修改
    安装Ubuntu 8.04 Server
    VirtualBox虚拟机网络设置(转)
    修改eclipse的背景色(转载)
  • 原文地址:https://www.cnblogs.com/vivin-echo/p/13954129.html
Copyright © 2011-2022 走看看