如何在vue js中使用number和regex进行验证？

Question

我必须验证文本框只接受数值和数字必须以7或8或9(正则表达式)开头。

我已经做了maxlength，minlength和required规则。它们工作得很好。但我不知道如何验证只接受数字和正则表达式。我已经尝试了一些语法，但不起作用。

<tab-content title="RELATIONSHIP DETAILS" icon="ti-info-alt" :before-change="validateFirstStep">
<el-form :inline="true" :model="formInline1" class="demo-form-inline" :rules="rules1" ref="ruleForm1">
<el-form-item label="Mobile Number" prop="mobno">
          <el-input maxlength="10" v-model="formInline1.mobno" placeholder="Mobile Number"></el-input>
        </el-form-item>

</el-form>

    </tab-content>

<script>
const app= new Vue({
   el: '#app',
     data() {
       return {
         formInline1: {
mobno:'',
},
         rules1: {
 mobno: [{
             required: true,
             message: 'Please enter Mobile Number',
             trigger: 'blur'
           }, {
             min: 10,
             max: 10,
             message: 'Length must be 10',
             trigger: 'blur'
           }],
}
       },
       methods: {
         onComplete: function() {
           alert('Yay. Done!');
         },
validateFirstStep() {
           return new Promise((resolve, reject) => {
             this.$refs.ruleForm1.validate((valid) => {
               resolve(valid);
             });
           })
         },
}
  })
</script>

Answer 1

验证规则如下所示：

{
  trigger: 'blur',
  validator (rule, value, callback) {
    if (/^[789]\d{9}$/.test(value)) {
      callback();
    } else {
      callback(new Error('Mobile number must be 10 digits starting 7, 8 or 9'));
    }
  }
}

调用不带参数的回调表示成功，调用错误表示验证失败。

RegExp检查7、8或9，后跟9个其他数字。没有严格的必要精确，因为已经有一个验证规则来检查总共10个字符。例如，如果我们知道有10个字符，/^[789]\d*$/也会起作用。

在实践中，最好将其分成两部分，一部分确认所有数字都是数字，另一部分检查第一个数字是7、8或9。这将允许在两种情况下显示不同的错误消息。

下面是一个完整的示例：

​

const app = new Vue({
  el: '#app',

  data () {
    return {
      formInline1: {
        mobno: '',
      },
      rules1: {
        mobno: [{
          required: true,
          message: 'Please enter Mobile Number',
          trigger: 'blur'
        }, {
          min: 10,
          max: 10,
          message: 'Length must be 10',
          trigger: 'blur'
        }, {
          trigger: 'blur',
          validator (rule, value, callback) {
            if (/^[789]\d{9}$/.test(value)) {
              callback();
            } else {
              callback(new Error('Mobile number must be 10 digits starting 7, 8 or 9'));
            }
          }
        }]
      }
    }
  }
});

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.10.1/lib/index.js"></script>
<div id="app">
  <el-form :inline="true" :model="formInline1" :rules="rules1">
    <el-form-item label="Mobile Number" prop="mobno">
      <el-input maxlength="10" v-model="formInline1.mobno" placeholder="Mobile Number"></el-input>
    </el-form-item>
  </el-form>
</div>

​

更新：

以下是两种情况下的单独消息示例：

if (/\D/.test(value)) {
  callback(new Error('Must all be numbers'));
} else if (!/^[789]/.test(value)) {
  callback(new Error('Must start 7, 8 or 9'));
} else {
  callback();
}

您甚至可以进一步将它们划分为两个单独的验证器，但只有当您需要重用其中一个验证器时，这才可能有用。

进一步更新：

元素似乎使用async-validator进行验证，所以我们可以使用pattern而不是自定义的validator：

​

const app = new Vue({
  el: '#app',

  data () {
    return {
      formInline1: {
        mobno: '',
      },
      rules1: {
        mobno: [{
          required: true,
          message: 'Please enter Mobile Number',
          trigger: 'blur'
        }, {
          min: 10,
          max: 10,
          message: 'Length must be 10',
          trigger: 'blur'
        }, {
          pattern: /^\d*$/,
          message: 'Must be all numbers',
          trigger: 'blur'
        }, {
          pattern: /^[789]/,
          message: 'Must start 7, 8 or 9',
          trigger: 'blur'
        }]
      }
    }
  }
});

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.10.1/lib/index.js"></script>
<div id="app">
  <el-form :inline="true" :model="formInline1" :rules="rules1">
    <el-form-item label="Mobile Number" prop="mobno">
      <el-input maxlength="10" v-model="formInline1.mobno" placeholder="Mobile Number"></el-input>
    </el-form-item>
  </el-form>
</div>

​

Answer 2

如果你需要匹配任何10位数字，以7，8或9开头，那么你可以使用类似这样的东西：^[7-9]\d{9}$ (示例here)。

这将匹配任何以7、8或9开头的数字，后面跟着9个其他数字。