uview 表单验证完整版

 

<view class="apply-form">
			<u--form :model="personnelInfo" ref="formInfo" :border-bottom="false" label-width="10px">
				<u-form-item  label-position="top"  prop="store"  ref="store" class="custom-form"
					>
					<view class="dis-flex">
						<i  class="custom-icon custom-icon-shop"></i><text class="lab"> 门店</text> 
					</view>  
					<u--input  fontSize="30rpx"  v-model="personnelInfo.store" :customStyle="customInputStyle"
						placeholder="请输入门店"  disabled disabledColor="#ffffff">
					</u--input>
				</u-form-item>
				<u-form-item  label-position="top"  prop="userName"  ref="userName"  class="custom-form"
					>
					<view class="dis-flex">
						<i class="custom-icon custom-icon-user"></i><text class="lab"> 姓名</text> 
					</view>  
					<u--input  fontSize="30rpx" v-model="personnelInfo.userName" :customStyle="customInputStyle"
						placeholder="请输入姓名(必填)" clearable  maxlength="5">
					</u--input>
				</u-form-item>
		
				<u-form-item  label-position="top" prop="idCard"  ref="idCard"  class="custom-form"
					>
					<view class="dis-flex">
						<i  class="custom-icon custom-icon-idcard"></i><text class="lab"> 身份证号</text> 
					</view>  
					<u--input fontSize="30rpx"   v-model="personnelInfo.idCard" :customStyle="customInputStyle"
						placeholder="请输入身份证号码(必填)" clearable type="idcard"  maxlength="18" >
					</u--input>
				</u-form-item>
				<u-form-item  label-position="top" prop="phoneNumber"  ref="phoneNumber"  class="custom-form"
					>
					<view class="dis-flex">
						<i  class="custom-icon custom-icon-phone"></i><text class="lab"> 手机号</text> 
					</view>  
					<u--input  v-model="personnelInfo.phoneNumber" fontSize="30rpx" 
						placeholder="请输入手机号(必填)" type="number" clearable  maxlength="11" :customStyle="customInputStyle">
					</u--input> 
				</u-form-item>
				
				<u-form-item  label-position="top"  prop="province" ref="province"  class="custom-form" @click="pickShowHandle"
					>
					<view class="dis-flex">
						<i  class="custom-icon custom-icon-sheng"></i><text class="lab"> 所在省份</text> 
					</view>  
					<u--input  fontSize="30rpx" v-model="personnelInfo.province" suffixIcon="arrow-down-fill" :suffixIconStyle="suffixIconStyle"
						placeholder="请选择所在省份(必填)" disabled disabledColor="#ffffff" :customStyle="customInputStyle" >
					</u--input>
					
					 
				</u-form-item>
				<u-form-item  label-position="top"  prop="address"  ref="address" class="custom-form"
					>
					<view class="dis-flex">
						<i  class="custom-icon custom-icon-adress"></i><text class="lab"> 详细地址</text> 
					</view> 
					<u--input fontSize="30rpx"  height="100px" v-model="personnelInfo.address" :customStyle="customInputStyle"
						placeholder="请输入详细地址(必填)"  clearable >
					</u--input>
				</u-form-item>
			</u--form>
			
			<view class="bottom">
				<u-button type="primary" :disabled="loading" @click="submit" throttle-time="2000" v-loading="loading">
					提交{{loading?"中...":""}}
				</u-button>
			</view>
			
	    		<u-picker ref="uPicker" title="选择省份" :show="pickShow" :columns="provincesArr" @confirm="confirm"
			 @cancel="close"></u-picker>
		</view>

export default {

    data(){
			return {
				personnelInfo:{
					store:"",
					userName:"",
					phoneNumber:" ",
					idCard:" ",
					province:" ",
					address:" ",
					laborServiceCompany:"",
					type:0,
				},
                loading:false,
				provincesArr:[],
				rules: {
				        store: [
				          { required: true, message: "门店名称不能为空", trigger: "blur" }
				        ],
				        userName: [
				         {
				            message: "请输入正确的姓名",
				            trigger: "blur",
							validator: (rule, value, callback) => {
							  return RegExp(
								/^[\u4e00-\u9fa5]{1,4}$/
							  ).test(value)
							},
				          },
				          { required: true, message: "用户名不能为空", trigger: "blur" }
				        ],
				        phoneNumber: [
							  {
								validator: (rule, value, callback) => {
									if (value) {
										return this.$u.test.mobile(value);
									} else {
										return true
									}
								},
								message: "手机号格式不正确",
								trigger: "blur"
							},
							{ required: true, message: "手机号码不能为空", trigger: "blur" }
				        ],
				        idCard: [
				           {
							 validator: (rule, value, callback) => {
									return RegExp(
										/^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}([0-9]|X)$/i
									).test(value)
								},
				            message: "请输入正确的身份证号码",
				            trigger: "blur"
				          },
				          { required: true, message: "身份证不能为空", trigger: "blur" }
				        ],
				        address: [
				          { required: true, message: "地址不能为空", trigger: "blur" }
				        ],
						province: [
						  { required: true, message: "省份不能为空", trigger: "change" }
						],
						laborServiceCompany: [
						  { required: true, message: "劳务公司不能为空", trigger: "change" }
						],
						type: [
						  { required: true, message: "类型不能为空", trigger: "change" }
						]
				      },
			}
		},


      // 这一步很重要
      onReady() {
			this.$refs.formInfo.setRules(this.rules);
	  },

      medths:{
        
            submit(){
				console.log(this.$refs.formInfo.validate);
				this.loading = true
				this.$refs.formInfo.validate().then(valid => {
					if (valid) {
						console.log('校验成功！')
					} else {
						console.log('校验失败！')
					}
				});
			},

    }



}