电话号的表单验证

最新推荐文章于 2024-05-06 16:35:05 发布

晶晶姐姐

最新推荐文章于 2024-05-06 16:35:05 发布

阅读量554

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_47382137/article/details/127056378

版权

<template>
<el-form ref="form" :rules="addRules" :model="accountInfo" label-width="120px" style="width: 500px">
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="accountInfo.phone" :disabled="isUpdate" />
        </el-form-item>
</el-form>
</template>
 
 
<script>
export default {
data() {
    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入电话号码'))
      }
      if (value.length !== 11) {
        callback(new Error('请输入正确电话号码'))
      }
      if (value.length !== 11) {
        callback(new Error('请输入正确电话号码'))
      }
      // 验证电话号码手机号码，包含至今所有号段? ?
      var ab = /^[1][3,4,5,7,8][0-9]{9}$/
      if (ab.test(value) === false) {
        callback(new Error('请输入正确电话号码'))
      }
      callback()
    }
return {
addRules: {
        phone: [
          { required: true, message: '请输入号码', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ]
}
}
}
}
</script>