<el-form:model="form":rules="rules"ref="formRef"style="max-width: 640px"label-width="115px"class="demo-ruleForm"label-position="right"><el-form-item label="手机号码:" prop="telphone" class="item"><el-inputplaceholder="请输入手机号码"autocomplete="off"v-model="form.telphone"style="max-width: 400px"></el-input></el-form-item><el-form-item label="邮箱地址:" prop="email" class="item"><el-inputplaceholder="请输入邮箱地址"autocomplete="off"v-model="form.email"style="max-width: 400px"></el-input></el-form-item></el-form>
import type { FormInstance} from "element-plus";let validateEmail = (rule, value, callback) => {if (!value) {return callback(new Error("邮箱不能为空!"));}else {const reg=/^[1-9][0-9]{4,}@$/if(reg.test(value)){callback();}else {return callback(new Error("邮箱格式不正确!"));} }};var checkPhone = (rule, value, callback) => {if (!value) {return callback(new Error('手机号不能为空'));} else {//验证手机号const reg = /^1[3|4|5|7|8][0-9]\d{8}$///验证区号const phoneReg = /^\d{3}-\d{8}|\d{4}-\d{7}$/ console.log(reg.test(value));if (reg.test(value)||phoneReg.test(value)) {callback();} else {return callback(new Error('请输入正确的联系电话'));}}};const rules = reactive({nickname: [{ required: true, message: "请输入昵称", trigger: "blur" },{ min: 3, message: "长度在3个字符以上", trigger: "blur" },],email: [{ required: true, validator: validateEmail, trigger: "blur" }],telphone: [{ required: true, validator: checkPhone, trigger: "blur" }],code: [{trigger: "blur",validator: function (rule, value, callback) {if (value&&/^[0-9]{6}$/.test(value) == false) {callback(new Error("请输入正确的邮政编码"));} else {callback();}},}],});
const saveForm = async (formEl: FormInstance | undefined) => {console.log("进入点击");if (!formEl) return;await formEl.validate((valid) => {console.log("开始校验")if (valid) {console.log(1)updateUserInfo(form).then((res) => {if (res.success) {console.log("提交了");} else {console.log("发送失败");}});formEl.resetFields();} else {console.log("校验不通过");}});};
注意:
require:true:代表是必须填的 不能为空 还显示前面的*号
require:false:代表是必须填的 不能为空 只是不显示前面的*号
但是如果不写require这个属性,那就代表可以不填
上面的code检验的是 /只能填6位数字/,/不显示*号/ /不是必须填的/。
trigger: "blur"去掉这句,就可以实时校验。