• vue3 如何给表单添加表单效验+正则表达式


    校验要求
    我们的表单中有密码、电话号码 ,两项。

    我们设置用密码为3到20位的非空字符

    电话号码就用目前用的电话号码正则表达式,要求手机号码以 1 开头,第二位为 3 到 9 之间的数字,后面跟着任意 9 个数字,总共是 11 位数字。

    1. "手机号" prop="tel">
    2. <el-input v-model="ruleForm.tel" :rules="rules" />
    3. <el-form-item label="密码" prop="cipher">
    4. <el-input v-model="ruleForm.cipher" :rules="rules" />
    5. el-form-item>

     做类型声明:

    1. interface RuleForm {
    2. tel: string
    3. cipher: string
    4. }

    然后对页面数据进行绑定:

    1. const rules = reactive<FormRules<RuleForm>>({
    2. tel: [
    3. { required: true, message: '请输入手机号', trigger: 'blur' },
    4. {
    5. validator: checkEmail,
    6. trigger: 'blur'
    7. },
    8. ],
    9. cipher: [
    10. { required: true, message: '请输入密码', trigger: 'blur' },
    11. {
    12. min: 3,
    13. max: 20,
    14. message: '密码为3~20位非空字符',
    15. trigger: 'blur'
    16. },
    17. {
    18. validator: checkUserName,
    19. trigger: 'blur'
    20. },
    21. ],
    22. })

    正则表达式:

    1. //定义手机号校验规则
    2. const checkEmail = (_rule: any, value: string, callback: (arg0: Error | undefined) => void) => {
    3. const regEmail = /^1[3-9]\d{9}$/;
    4. if (value === '') {
    5. callback(new Error("输入不能为空"))
    6. } else if (regEmail.test(value)) {
    7. return callback();
    8. }
    9. callback(new Error("请输入正确手机号"));
    10. }
    11. //密码效验规则
    12. const checkUserName = (_rule: any, value: string, callback: (arg0: Error | undefined) => void) => {
    13. if (value.trim() === '') {
    14. callback(new Error("密码不可为空"))
    15. } else {
    16. return callback();
    17. }
    18. }

  • 相关阅读:
    数据安全系列(1):开篇
    docker系列7:docker安装ES
    Redis快速度特性及为什么支持多线程及应用场景
    10.4作业
    SAP ABAP MIGO 自动生成MRP区域MD_MRP_LEVEL_CREATE_DATA
    手撕漏桶&令牌桶限流算法(Java版)
    Bootstrap的CSS类积累学习
    将map对象转换成vo对象
    CompletableFuture使用详解
    JavaScript游戏恢复
  • 原文地址:https://blog.csdn.net/FENGZXCjjjjj/article/details/139718742