如何在 vue js 中使用數字和正則表達式進行驗證？

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 個字符的驗證規則。 例如/^[789]\\d*$/也可以工作，因為我們知道有 10 個字符。

在實踐中，最好將其分成兩個單獨的部分，一個確認所有數字都是數字，另一個檢查第一個數字是 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();
}

您可以更進一步，將它們分成兩個單獨的驗證器，但這可能只有在您需要獨立於另一個重用其中一個驗證器時才有用。

進一步更新：

似乎 Element 使用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}$ （此處的示例）。

這將匹配任何以 7、8 或 9 開頭且后跟 9 個其他數字的數字。