iview 新手自己实现表单验证的过程 日期控件类型type为“daterange“

                   在编辑页面中常常会用到表单验证的功能，今天就来贴个自己实现的心酸步骤             

1.需求描述：

就是这样的功能==>首先点击确定按钮，提示提交失败，不允许为空==>正确输入手机号11位，身份证18位，选择时间==>再点击确定按钮==>提交成功、页面跳转

2.详细步骤：

    1）首先需要编辑好自己的页面，我的From表单是嵌套在Modal对话框中的，这样可以实现假如点击一个按钮，弹出办理业务的框

    2）每一个FormItem都要写好v-model，他们命名的前缀一样，iview官网也有全部代码

<FormItem label="房间名称" prop="roomname" style="margin-left:20px">
        <Input v-model="formValidate.roomname" disabled ></Input>
</FormItem>
<FormItem label="姓名" prop="name" style="margin-left:20px">
        <Input v-model="formValidate.name" placeholder="请输入姓名" </Input>
</FormItem>
<FormItem label="手机号" prop="number" style="margin-left:20px">
         <Input v-model="formValidate.number" placeholder="请输入手机号"></Input>
</FormItem>
<FormItem label="身份证号" prop="idcard" style="margin-left:20px">
         <Input v-model="formValidate.idcard" placeholder="请输入身份证号" ></Input>
</FormItem>

 3）接下来是重点 DatePicker日期选择器（这里我改了无数次代码，我真的很笨），也是写一个一样的v-model前缀并给他取个有趣的名字，type我选择的是daterange，添加了change事件能够轻易的找到字段中发生的变更以及其值得变更轨迹（前辈那里看来的），而在DatePicker中添加v-model是使input输入时，message立即同步。设置属性 options 对象中的 disabledDate 可以设置不可选择的日期。

<FormItem style="position: relative;margin-left:20px">
       <label style="width:90px;position: absolute;left:-82px;top:0px">入住时间段</label>
       <Row>
           <Col span="11">
                <FormItem prop="dates">
                     <DatePicker type="daterange" placeholder="请选择入住时间段"
                                        v-model="formValidate.dates" 
                                        @onchange="handleChange"
                                        style="width:300px" :options="options3">
                     </DatePicker>            
                 </FormItem>
            </Col>
       </Row>
</FormItem>

4）在data中定义数据，实现数据验证，给 Form 设置属性 rules

 required值为true设置不允许为空，message为提示信息，trigger属性填写的是在什么情况下触发该验证pattern为正则表达式限制用户输入，以/^开头，$/结尾，第一个[]中写的是以什么开头，第二个[]中写的是除第一个字以外后面可以输入什么{}中为输入总长度（这里的总长度已经减去了开头第一个数字）。

data() {
            return {
                formValidate: {
                    name:'',
                    number:'',
                    idcard:'',
                    dates:[],
                    desc:'',
                    roomname:''
                },
                loading: false,
                options3:{
                    disabledDate (date){
                        return date && date.valueOf()<Date.now()-86400000
                    }
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    number: [
                        { required: true, message: '请正确输入电话号码', trigger: 'blur',pattern:/^[1][0-9]{10}$/ }
                    ],
                    idcard: [
                        { required: true, message: '请正确输入身份证号', trigger: 'blur',pattern:/^[1-8][0-9]{17}$/ }
                    ],
                    dates: [{
                          type: "array", required: true, message: '请选择入住时间段',
                          fields: {
                            0: {type: 'date', required: true, message: '请选择入住时间段'},
                            1: {type: 'date', required: true, message: '请选择入住时间段'}
                          }
                     }]
                }
            }
            
        }

5）最后是methods中确定按钮的代码，有一个click事件

 别看他感觉有点复杂，这个代码段iview官网有的，我加了一个点击确定按钮时，确定按钮是否显示 loading 状态，可以这样旋转两秒，显得有在努力加载的样子，this.$router.push可以实现跳转页面。

然后就是日期选择器中绑定的change事件，给他一个date参数，让date数据赋值给这个日期选择器的值，这样就不会放你明明选择了日期，还报错说“请你选择时间段”。

handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        setTimeout(() => {
                         this.loading = false;
                         this.$Message.success('办理成功');
                         this.$router.push("/two")
                        }, 2000);
                    } 
                    else {
                        this.$Message.error('提交失败!');
                    }
                })
            },
            handleChange(date){
                this.formValidate.datas = date
            }

最后功能虽然实现了，其实还是有不理解的地方，学习！！！！，努力！！！！！！