elementUI——form表单

1、form表单验证：公共验证和行内验证

• 定义公共验证方法

// utils/index

// 手机号校验
export function checkPhoneNumber(rule, value, callback) {
  const reg =
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //11位手机号
  if (!value) {
    return callback(new Error("手机号不能为空"));
  } else if (!reg.test(value)) {
    return callback(new Error("手机号格式不正确"));
  } else {
    return callback();
  }
}
// 身份证号校验
export function checkCardId(rule, value, callback) {
  const reg =
    /(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/;
  if (!value) {
    return callback(new Error("证件号码不能为空"));
  } else if (!reg.test(value)) {
    return callback(new Error("证件号码不正确"));
  } else {
    callback();
  }
}
// 密码校验
export function checkPassWord(rule, value, callback) {
  const reg =
  /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{8,64}$/;
  if (!value) {
    return callback(new Error("密码不能为空"));
  } else if (!reg.test(value)) {
    return callback(new Error("请输入8位以上密码，必须包含数字、字母、特殊符号"));
  } else {
    callback();
  }
}

• 使用

<el-form-item label="联系电话" prop="telephone">
     <el-input
      size="small"
      clearable
      v-model="form.telephone"
      placeholder="请输入联系电话"
      style="width: 100%"
    >
    </el-input>
</el-form-item>
import {
  checkPhoneNumber, //手机号校验
} from "@/utils/index";
 // 表单校验
 rules: {
    telephone: [
      { required: true, message: "不能为空", trigger: "blur" },
      {
         validator: checkPhoneNumber,
         trigger: "blur",
      },
   ],
 },

• 直接使用type规则，例如number ，email

 <el-form-item
    label="年龄"
    prop="age"
    :rules="[
      { required: true, message: '年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
 >
 <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>

修改lable标签的样式，例如color

• 修改所有的lable样式

.el-form-item__label{
    color: red;
  }

• 修改单个lable的样式

<el-form-item label="年龄" prop="age" class="item">

.item .el-form-item__label{
    color: red;
}

• 修改lable中部分文字的颜色

<el-form-item>
   <span slot="label">label 值 <span class="red">（特殊提示）</span> </span>  // slot
   <el-input></el-input>
</el-form-item>