修改乙方运维-个人信息-表单校验

@@ -98,3 +98,16 @@
     text-align: right;
     padding: 3px
 }
+
+/*-------------------------------------*/
+
+.el-form-item__error {
+    color: var(--el-color-danger);
+    font-size: 12px;
+    line-height: 1;
+    padding-top: 1px;
+    position: absolute;
+    top: 58%;
+    left: 70%;
+}
+

@@ -17,7 +17,7 @@
         <i class="iconfont icon-icon--yingbing" /> 人员基本信息
     </div>
     <div style="padding-left: 40px;margin-bottom: 6px">
-        <el-form :model="ruleForm" label-width="120px" :size="$global.elementSize" label-position="top" >
+        <el-form   :rules="rules" ref="rule" :model="ruleForm"   label-width="120px" :size="$global.elementSize" label-position="top" >
             <el-row :gutter="5">
                 <el-col :span="8">
                     <el-form-item label="姓名" prop="nickname" class="form-class">
@@ -53,7 +53,7 @@
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="电子邮箱" prop="email" class="form-class">
-                        <el-input v-model="ruleForm.email"></el-input>
+                        <el-input v-model="ruleForm.email" id="email"></el-input>
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -136,7 +136,7 @@
                 </el-col>
             </el-row>
             <div style="text-align: center;padding-top: 10px">
-                <el-button type="primary" size="mini" @click="saveUser">保存基本信息</el-button>
+                <el-button type="primary" size="mini" @click="saveUser()">保存基本信息</el-button>
             </div>
         </el-form>
     </div>

@@ -191,6 +191,7 @@ const assets = (props, {attrs, slots, emit}) => {
 
 
 export default {
+
     name: 'projectPJIndex',
     template: '',
     components: {},
@@ -209,7 +210,8 @@ export default {
         },
     },
     data() {
-        return {}
+        return {
+        }
     },
     setup(props, {attrs, slots, emit}) {
         let height = Vue.ref(window.innerHeight - 130);
@@ -239,6 +241,7 @@ export default {
             politicsStatus:''
         })
 
+
         // 获取表格数据
         let getPage = () => {
             proxy.$http.get("/api-web/bOpsPerson/search", {
@@ -258,17 +261,114 @@ export default {
         }
 
 
-        // 保存用户信息
-        let saveUser = () => {
-            if(!ruleForm.value.politicsStatus){
-                proxy.$global.showMsg('政治面貌不能为空！',"warning");
-                return false;
+        /**
+         * @Author LH
+         * @param rule
+         * @param value
+         * @param callback
+         * @returns {*}
+         */
+        const checkTel= (rule, value, callback) => {
+            var re1=/^0\d{2}-[1-9]\d{7}$/;
+            var re2=/^0\d{3}-[1-9]\{6,7}$/;
+            var result=re1.test(value)||re2.test(value);
+            if (!result) {
+                return callback(new Error('请输入正确的座机号！'))
+            }else{
+                callback()
+            }
+        }
+        /**
+         * @Author LH
+         * @param rule
+         * @param value
+         * @param callback
+         * @returns {*}
+         */
+        const checkPhone= (rule, tel, callback) => {
+            var  mobile = /^1[3|5|8]\d{9}$/;
+            if (!mobile.test(tel)) {
+                return callback(new Error('请输入正确的手机号！'))
+            }else{
+                callback();
+            }
+        }
+        /**
+         * @Author LH
+         * @param rule
+         * @param value
+         * @param callback
+         * @returns {*}
+         */
+        const checkEmail= (rule, tel, callback) => {
+            var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
+            var obj = document.getElementById("email"); //要验证的对象
+            if(obj.value === ""){ //输入不能为空
+                return callback(new Error('邮箱不能为空！'));
+            }else if(!reg.test(obj.value)){ //正则验证不通过，格式不对
+                return callback(new Error('邮箱格式不正确！'));
+            }else{
+                callback()
+            }
+        }
+        const  checkIdCard=(rule, idCard, callback) => {
+            var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
+           if (pattern.test(idCard)) {
+               callback()
+            }else{
+               return callback(new Error('身份证校验失败！'));
             }
-            proxy.$http.post("/api-web/bOpsPerson/saveOrUpdate", ruleForm.value, function (res) {
-                if (res && res.code == 0) {
-                    proxy.$global.showMsg('保存成功！');
+        }
+
+        /**
+         * @author LH
+         * 表单规则校验
+         */
+        let rules=Vue.ref({
+            nickname: [
+                {required: true,  message: '请输入姓名', trigger: 'blur' }
+            ],
+            tel: [
+                {required: true, validator: checkTel, trigger: 'blur' }
+            ],
+            phone: [
+                {required: true, validator: checkPhone, trigger: 'blur' }
+            ],
+            email: [
+               {required: true, validator: checkEmail,  trigger: 'blur' }
+            ],
+            company: [
+                {required: true, message:'请输入所在公司', trigger: 'blur' }
+            ],
+            idcard: [
+               {required: true, validator:checkIdCard,message:'请输入身份证号', trigger: 'blur' }
+            ],
+            entryTime: [
+                { required: true, message: '请选择入职时间', trigger: 'blur' },
+            ],
+        });
+
+
+        /**
+         * @EDITOR LH
+         * @returns {boolean}
+         */
+            // 保存用户信息
+        let saveUser = () => {
+            proxy.$refs.rule.validate((valid) => {
+                if (valid) {
+                    console.log('submit!!');
+                    proxy.$http.post("/api-web/bOpsPerson/saveOrUpdate", ruleForm.value, function (res) {
+                        if (res && res.code == 0) {
+                            proxy.$global.showMsg('保存成功！');
+                        }
+                    });
+                } else {
+                    console.log('error submit!!');
+                    return false;
                 }
             });
+
         }
 
 
@@ -349,6 +449,7 @@ export default {
             getAssetType,
             // 资产属性
             icon,
+            rules,
         }
     }
-}
+}
\ No newline at end of file