vue form表单验证

第一种：非必填不能为空，并且需要正则验证
第二种：必填，正则验证，不能只输入空格验证
第三种：必填，正则验证，不能输入空格(v-model.trim)
第四种：选了多选框后必填

第一种：非必填不能为空，并且需要正则验证

<template>
	<div>
		<el-form
		      class="abow_dialog"
		      :model="ruleForm"
		       ref="ruleForm"
		      :rules="rules"
		      label-width="180px"
		    >
		      <el-form-item label="电话（座机）：" prop="tel">
		        <el-input v-model="ruleForm.tel"></el-input>
		      </el-form-item>
		</el-form>
	</div>
</template>
<script>
export default {
  data(){
  	// 电话（座机）
    var validateworkTel=(rule, value, callback) =>{
        let regexp = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,8}$/;
        if(value != null){
          let valdata = value.split(',');
          let isCorrect = true;
            if (valdata.length) {
              for (let i = 0; i < valdata.length; i++) {
                if (regexp.test(valdata[i]) == false) {
                    isCorrect = false;
                }
              }
            }				      
            if (value == '') {
              callback();
            }else if (!isCorrect) {
              callback(new Error('请输入正确的固定电话'));
            } else {
              callback()
            }
        }
        callback();
    }
  	return {
  		ruleForm: {
		  tel:"",
		},
		// 验证
        rules: {
			workTel:[
       			{ required: false, validator: validateworkTel, trigger: 'blur'},
        	]
		},
  	}
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

第二种：必填，正则验证，不能只输入空格验证

<template>
	<div>
		<el-form
		      class="abow_dialog"
		      :model="ruleForm"
		       ref="ruleForm"
		      :rules="rules"
		      label-width="180px"
		    >
		      <el-form-item label="电话（座机）：" prop="mobile">
		        <el-input v-model="ruleForm.mobile"></el-input>
		      </el-form-item>
		</el-form>
	</div>
</template>
<script>
	export default {
	  data(){
	  	// 手机号
	    var validateMobile=(rule, value, callback) =>{
	        let regexp = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
					let valdata = value.split(',');
					let isCorrect = true;
						if (valdata.length) {
							for (let i = 0; i < valdata.length; i++) {
							   if (regexp.test(valdata[i]) == false) {
							       isCorrect = false;
							   }
							}
						}				      
						if (value == '') {
							return callback(new Error('请输入手机号'));
						} else if (!isCorrect) {
							callback(new Error('请输入正确的手机号'));
						} else {
							callback()
						}
	        callback();
	    }
	  	return {
	  		ruleForm: {
			  mobile:"",
			},
			// 验证
        	rules: {
				mobile:[
          			{ required: true, validator: validateMobile, trigger: 'blur' },
          			{ pattern: /\s*\S+?/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
			},
		}
	  }
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

第三种：必填，正则验证，不能输入空格(v-model.trim)

<template>
	<div>
		<el-form
		      class="abow_dialog"
		      :model="ruleForm"
		       ref="ruleForm"
		      :rules="rules"
		      label-width="180px"
		    >
		    <el-form-item label="IP地址：" prop="contactIp">
        		<el-input v-model.trim="ruleForm.contactIp"></el-input>
      		</el-form-item>
		</el-form>
	</div>
</template>
<script>
	export default {
	  data(){
	  var validateContactIp=(rule, value, callback) =>{
        let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;
				let valdata = value.split(',');
				let isCorrect = true;
					if (valdata.length) {
						for (let i = 0; i < valdata.length; i++) {
						   if (regexp.test(valdata[i]) == false) {
						       isCorrect = false;
						   }
						}
					}				      
					if (value == '') {
						return callback(new Error('请输入IP地址'));
					} else if (!isCorrect) {
						callback(new Error('请输入正确的IP地址'));
					} else {
						callback()
					}
        callback();
    }
	  	return {
	  		ruleForm: {
			  contactIp:"",
			},
			// 验证
        	rules: {
				contactIp:[
	          		{ required: true, validator: validateContactIp, trigger: 'blur' },
	        	],
	        }
		}
	  }
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

第四种：选了多选框后必填，

<template>
	<div>
		<el-form
		      class="abow_dialog"
		      :model="ruleForm"
		       ref="ruleForm"
		      :rules="rules"
		      label-width="180px"
		    >
		    <el-form-item label="基本配置：" prop="isTopChecked" class="clearfix">
          <el-checkbox-group v-model="ruleForm.reminderChecked" class="fl" style="width:150px">
            <el-checkbox label="站内提醒" name="reminderChecked"></el-checkbox>
          </el-checkbox-group>
          <el-checkbox-group v-model="ruleForm.isTopChecked" class="fl" style="width:150px">
            <el-checkbox label="是否置顶" name="isTopChecked" @change="isTopCheckedChange"></el-checkbox>
          </el-checkbox-group>
          <el-date-picker
            v-if="isTopDataShow"
            v-model="ruleForm.isTopDatavalue"
            type="date"
            time-arrow-control
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            placeholder="置顶日期"
            style="width: 20%;"
            class="fl"
          >
          </el-date-picker>
        </el-form-item>
		</el-form>
	</div>
</template>
<script>
	export default {
	  data(){
	  var isTopValidate=(rule, value, callback) =>{
        if(value===true){
          if(this.ruleForm.isTopDatavalue == "" || this.ruleForm.isTopDatavalue == null){
            callback(new Error('请选择日期'));
          }else{
            callback();
          }
        }else{
          callback();
        }
      }
	  return {
	  		ruleForm: {
	  			reminderChecked:true,
          		isTopChecked:false,
          		isTopDatavalue:"",
          	},
          	// 验证
        	rules: {
				isTopChecked:[
		            { required: false, validator: isTopValidate, trigger: "blur" }
		        ]
			}
         }
	  }
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63