Vue + Element UI 校验手机号

约定不等于承诺〃 2023-10-11 16:47 50阅读 0赞

## 校验思路 ##

*  监听输入框，过滤字符串
 *  长度控制11位
 *  通过正则表达式验证手机号格式

## 示例代码 ##

<el-input size="medium" v-model="orderForm.telephone" placeholder="请填写收件人手机号码" clearable maxlength="11"></el-input>
    
    <script>
    export default {
      data() {
        /**
         * 校验手机号
         */
        const validatePhone = (rule, value, callback) => {
          const regExp = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
          if (!regExp.test(value)) {
            callback(new Error('请输入正确的手机号'))
          } else {
            callback()
          }
        }
        return {
          orderForm: {
            telephone: '',
          },
          formRules: {
            telephone: [{
              required: true,
              message: '请填写收件人手机号码',
              trigger: 'blur',
            }, {
              validator: validatePhone,
              trigger: 'change',
            }],
          },
        }
      },
      watch: {
        'orderForm.telephone': {
          handler(newVal) {
            if (!newVal) {
              this.orderForm.telephone = ''
              return false
            }
            // 实时把非数字的输入过滤掉
            this.orderForm.telephone = newVal.match(/\d/gi) ? newVal.match(/\d/gi).join('') : ''
          },
          deep: true,
        },
      },
    }
    </script>

发表评论取消回复

表情：

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

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

相关阅读

相关正则校验手机号

正则表达式可以用来校验手机号码的合法性。如果你想使用正则表达式来校验中国大陆的手机号码，可以使用如下的正则表达式： ^1\[3-9\]\\d\{9\}$ 这个正则表达式

ゝ一纸荒年。/ 2024年03月26日 09:19/ 0 赞/ 102 阅读

相关 Vue + Element UI 校验手机号

校验思路监听输入框，过滤字符串长度控制11位通过正则表达式验证手机号格式示例代码 <el-input size="medium"

约定不等于承诺〃/ 2023年10月11日 16:47/ 0 赞/ 51 阅读

相关 vue表单校验（身份证/手机号等等）

随便在src下创建一个文件 validator.js /是否合法IP地址/ export function validateIP(rule, value, c

灰太狼/ 2023年05月22日 04:53/ 0 赞/ 27 阅读

相关 springboot手机号校验

手机号校验： @ApiModelProperty(value = "联系人电话") @NotBlank(message = "手机号码不能为空", g

小咪咪/ 2022年12月28日 11:29/ 0 赞/ 723 阅读

相关校验移动手机号

function validateMobileNum(str){ if(str==""){ return false; } /

男娘i/ 2022年06月10日 10:57/ 0 赞/ 226 阅读

相关 js校验手机号

function checkPhone(v) { if (!(/^1(3|4|5|7|8)\d{9}$/.test(v))) {

今天药忘吃喽~/ 2022年01月26日 08:47/ 0 赞/ 320 阅读

相关 element-ui+vue-treeselect校验

element-ui+vue-treeselect下拉框的校验问题陈述：在element-ui中有自带的表单验证，但是使用的vue-treeselect无法验证

Dear 丶/ 2021年12月20日 18:57/ 0 赞/ 796 阅读

相关手机号校验

js手机号码的校验 / 判断字符串是否是手机号码，若是则返回true,若否则返回false / function isPhone(phone){

￡神魔★判官ぃ/ 2021年10月15日 16:19/ 0 赞/ 439 阅读

相关正则校验手机号

public class test { public static void main(String[] args) { Str

女爷i/ 2021年09月14日 01:42/ 0 赞/ 561 阅读

相关 element ui 验证手机号是否合法的函数封装

验证手机号是否合法，亲测有效 function isMobileNumber(phone) { var flag = false;

比眉伴天荒/ 2021年07月25日 22:05/ 0 赞/ 562 阅读