mui-坑：2.验证表单不支持，需使用jquery-mvalidate

本文链接：https://blog.youkuaiyun.com/Qian_v1/article/details/123556377

该博客内容涉及前端HTML表单的设计与验证，使用了mvalidate插件进行表单验证，包括姓名、身份证等关键字段的必填和格式检查。在表单验证通过后，利用ys.ajax进行数据提交，实现用户信息的保存，并根据后端返回的响应进行成功或失败的提示处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.页面

 <form id="form" autocomplete="off">
 <div class="mui-input-row d-flex a-center j-sb pr-1">
                <label class="text-muted">姓名</label>
                <input class="text-right font-md" id="name"  col="Name" v-model="data.Name" type="text"
                       placeholder="请输入姓名" name="name" data-required="true" data-descriptions="name" />
                <span class="icon iconfont icon-pan_icon text-danger"></span>
            </div>

 <input  type="submit" class="mui-btn mx-1 bg-orange border-0 text-white p-1 span24-18" v-on:click="saveForm()" value="保 存" />

</form>

2.提交事件

   saveForm(index) {
                 $.mvalidateExtend({
                     idCard: {
                         required: true,
                         pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                         each: function () {

                         },
                         descriptions: {
                             required: '必填字段',
                             pattern: '请输入正确的身份证号码'
                         }
                     }
                 });
                 $("#form").mvalidate({
                    type:1,
                    onKeyup:true,
                    sendForm:true,
                    firstInvalidFocus:false,
                    valid:function(event,options){
                        //点击提交按钮时,表单通过验证触发函数
                        ys.ajax({
                            url: '@Url.Content("~/ArchivesManage/ExamineeUser/SaveFormJson")',
                            type: 'post',
                            data: appObj.data,
                            success: function (obj) {
                                console.log('index2')
                                if (obj.Tag == 1) {
                                    ys.msgSuccess(obj.Message);
                                    location.href = '@Url.Content("~/PhonewebMange/Home/AdmissionList")'
                                  /*  history.go(-1)*/
                                } else {
                                    ys.msgError(obj.Message);
                                }
                            }
                        });
                    },
                    descriptions:{
                        name: {required: "请输入姓名"},

                        dateBirth: {
                            required: "请选择生日"
                        },
                        nationalResult: {
                            required: "请选择民族"
                        },
                        gender: {
                            required:"请选择性别"
                        },
                        //politicCountenance: {
                        //    required: "请选择政治面貌"
                        //},
                        maritalStatus: {
                            required: "请选择婚姻状况"
                        },
                        educationResult: {
                            required: "请选择学历"
                        },
                        degreeResult: {
                            required: "请选择学位"
                        },
                        graduateSchool: {
                            required: "请输入学校"
                        },
                        graduationDate: {
                            required: "请选择毕业时间"
                        },
                        professional: {
                            required: "请输入所学专业"
                        },
                        //isFull_Time: {
                        //    required: ""
                        //},
                        currentDomicilePlace: {
                            required: "请输入户籍所在地"
                        },
                        inTime: {
                            required: "请选择落户时间"
                        },
                        fixedTelephone: {
                            required: "请输入固定电话"
                        },
                        nowWorkUnit: {
                            required: "请输入现单位"
                        },
                        students: {
                            required: "请输入生源地"
                        },
                        correspondenceAddress: {
                            required: "请输入通讯地址"
                        },
                        postalCode: {
                            required: "请输入邮政编码"
                        },
                        email: {
                            required: "请输入邮箱"
                        },

                        politicalLandscapeString: {
                            required: "请输入政治面貌"
                        },
                        //idCard: {
                        //    required: "请输入身份证号",
                        //  isIdentity: true
                        //}
                    }
                 })
             },