<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  <el-form-item label="名稱" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>

在data中編寫rules規(guī)則：

rules {	
      name: [ { type: 'string',required: true,message: "名稱必填", trigger: 'blur'},
       {max: 30,message: "名稱長度不能超過30位" }]
      }

其中name為prop名
type：類型
required：是否必選項(xiàng)（此欄是否為空）
message:"“設(shè)置不符合校驗(yàn)規(guī)則時的提示信息；
trigger:”"設(shè)置校驗(yàn)的觸發(fā)方式：
‘change’:數(shù)據(jù)改變時觸發(fā)； 常用：對 input 輸入框的驗(yàn)證
‘blur’:失去焦點(diǎn)時觸發(fā)； 常用：下拉框select，日期選擇框date-picker，復(fù)選框checkbox，單選框radio
pattern： 正則表達(dá)校驗(yàn)形式
validator： 驗(yàn)證器 可使用自定義方法進(jìn)行校驗(yàn)

vue的rules中自帶的校驗(yàn)規(guī)則和常用正則表達(dá)式校驗(yàn)

rules: {
    //驗(yàn)證非空和長度
    name: [{
        required: true,
        message: "站點(diǎn)名稱不能為空",
        trigger: "blur"
        },{
        min: 3, 
        max: 5, 
        message: '長度在 3 到 5 個字符', 
        trigger: 'blur' 
    }],
    //驗(yàn)證數(shù)值
    age: [{ 
        type: 'number', 
        message: '年齡必須為數(shù)字值',
        trigger: "blur"
    }],
    //驗(yàn)證日期
    birthday:[{ 
        type: 'date', 
        required: true, 
        message: '請選擇日期', 
        trigger: 'change' 
    }],
    //驗(yàn)證多選
    habit: [{ 
        type: 'array', 
        required: true, 
        message: '請至少選擇一個愛好', 
        trigger: 'change' 
    }],
    //驗(yàn)證郵箱
    email: [{ 
        type: 'email', 
        message: '請輸入正確的郵箱地址', 
        trigger: ['blur', 'change'] 
    }],
    // 驗(yàn)證手機(jī)號
    telephone: [{
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: "請輸入正確的手機(jī)號碼",
        trigger: "blur"
    }],
    // 驗(yàn)證經(jīng)度 整數(shù)部分為0-180小數(shù)部分為0到7位
    longitude: [{
        pattern: /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/,
        message: "整數(shù)部分為0-180,小數(shù)部分為0到7位",
        trigger: "blur"
    }],
    // 驗(yàn)證維度 整數(shù)部分為0-90小數(shù)部分為0到7位
    latitude: [{
        pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
        message: "整數(shù)部分為0-90,小數(shù)部分為0到7位",
        trigger: "blur"
    }]          
}

常用正則表達(dá)式

1、是否合法IP地址:

/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
2.是否手機(jī)號碼或者固話
/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,

3. 是否身份證號碼
/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,

4.是否郵箱
/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,

5.整數(shù)填寫
/^-?[1-9]\d*$/,

6.正整數(shù)填寫
/^[1-9]\d*$/,

7.小寫字母
/^[a-z]+$/,

8.大寫字母
/^[A-Z]+$/,

9.大小寫混合
/^[A-Za-z]+$/,

10.多個8位數(shù)字格式(yyyyMMdd)并以逗號隔開
/^\d{8}(\,\d{8})*$/,

11.數(shù)字加英文，不包含特殊字符
/^[a-zA-Z0-9]+$/,

12.前兩位是數(shù)字后一位是英文
/^\d{2}[a-zA-Z]+$/,

13.密碼校驗(yàn)（6-20位英文字母、數(shù)字或者符號（除空格），且字母、數(shù)字和標(biāo)點(diǎn)符號至少包含兩種）
/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,

14.中文校驗(yàn)
/^[\u0391-\uFFE5A-Za-z]+$/

還可參考常用正則表達(dá)式生成網(wǎng)站 點(diǎn)擊跳轉(zhuǎn)

使用validator校驗(yàn)器校驗(yàn)

prop對應(yīng)表單域 model 字段，使用 validate方法時，該屬性是必填的。

rules: {
          age: [
            {validator: checkAge , type: "number", trigger: "change"},
          ]
        },

若是使用validator校驗(yàn)
校驗(yàn)方法需要在data中并與return同級

    var checkAge = (rules, value, callback) =>{
      if (!value) {
        return callback(new Error("年齡不可以為空"));
      }

      setTimeout(() => {
        if (value == null && value == undefined && value == "") {
          return callback(new Error("年齡不可以為空"));
        }else if(value >= 150 || value <= 0 ){
          return callback(new Error("年齡有誤"));
        }else {
          return callback();
        }
      },100)

    };

form-item綁定的rules

rules不綁定在from而是綁定在form-item上；checkAge檢驗(yàn)方法需要寫在methods: {}里面

<el-form :model="ruleForm" ref="ruleForm">
  <el-form-item label="名稱" prop="name"
  :rules="[{ type: 'string',required: true,message: ‘名稱必填’, trigger: 'blur'},{ validator: checkAge, trigger: 'blur' }]">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>

    methods: {
    checkAge(rules, value, callback){
      if (!value) {
        return callback(new Error("年齡不可以為空"));
      }

      setTimeout(() => {
        if (value == null && value == undefined && value == "") {
          return callback(new Error("年齡不可以為空"));
        }else if(value >= 150 || value <= 0 ){
          return callback(new Error("年齡有誤"));
        }else {
          return callback();
        }
      },100)

    }
    }

若是出現(xiàn)必填項(xiàng)*表示必填項(xiàng)錯誤情況

參考 鏈接

* 標(biāo)識必填項(xiàng)不對，每次進(jìn)入表單必填項(xiàng)的|*都會進(jìn)行變動，有可能是rules中的必填項(xiàng)過多（rules有8個必填校驗(yàn)，但是實(shí)際渲染出的from只有3個必填項(xiàng)，其他幾個進(jìn)行隱藏），并且在表單中使用v-if或者v-show控制組件隱藏
解決辦法
1、此時可以將頁面的v-if改成v-show，或v-show改v-if，嘗試看看能不能解決必填校*驗(yàn)標(biāo)識錯亂問題，有可能是v-if和v-show的渲染機(jī)制導(dǎo)致的問題（在Vue中，我們可以使用v-if和v-show來控制元素或模板的渲染。而v-if和v-show也屬于Vue的內(nèi)部常用的指令（條件渲染）。這里所說的指令就是directive，指特殊的帶有前綴v-的命令，指令的值限定為綁定表達(dá)式，指令的職責(zé)是當(dāng)表達(dá)式的值改變時把某些特殊的行為應(yīng)用到DOM上。v-if根據(jù)表達(dá)式的值true或false在DOM中生成或者移除一個元素（或多個元素），其中v-if依賴于控制DOM節(jié)點(diǎn)，而v-show是依賴于控制DOM節(jié)點(diǎn)的display屬性。當(dāng)v-show傳入的值為true時，對應(yīng)DOM元素的display的值為block之類的，反之為false時，display的值為none。也就是用戶看不到元素的顯示，但其DOM元素還是存在的。）

1、繼續(xù)使用v-if\v-show控制組件的隱藏，將固定rules中的必填校驗(yàn)取消，或者使用將rules綁定在form-item，將一些非公共的校驗(yàn)直接綁定到form-item里面，不在通過from的rules進(jìn)行校驗(yàn)綁定。文章來源地址http://www.zghlxwxcb.cn/news/detail-764009.html

到了這里，關(guān)于Vue中rules表單驗(yàn)證，表單必填*顯示位置不對，*顯示位置錯誤的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！