1、在vue中，經常會在表單中遇到身份證格式校驗，首先想到使用表單校驗的方式來處理，首先創建身份證輸入框

<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-form-item label="身份證號" prop="idCardNumber"><el-input v-model="form.idCardNumber" placeholder="請輸入身份證號碼" /></el-form-item></el-form> </el-dialog>

2、定義身份證校驗方法,在rules中調用。

export default {name:'',components: {},data() {//身份證校驗const isCnNewID = (rule, value, callback) => {var arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];//加權因子var arrValid = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2];//校驗碼if (/^\d{17}\d|x$/i.test(value)) {var sum = 0, idx;for (var i = 0; i < value.length - 1; i++) {// 對前17位數字與權值乘積求和sum += parseInt(value.substr(i, 1), 10) * arrExp[i];}// 計算模（固定算法）idx = sum % 11;// 檢驗第18為是否與校驗碼相等if (arrValid[idx] == value.substr(17, 1).toUpperCase()) {callback()} else {callback("身份證格式有誤")}} else {callback("身份證格式有誤")}}return {title:'',open:false,form:{},//表單校驗rules: {idCardNumber: [{ required: true, message: "身份證不能為空", trigger: "blur" },{ //調用上面定義的方法校驗格式是否正確validator: isCnNewID,trigger: "blur"}]}} }

總結

以上是生活随笔為你收集整理的vue 身份证格式校验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。