目录

1、使用a-form

2、a-form-model验证

3、密码确认

---

1、使用a-form

验证的js-----decorator.js

let validateRulesObj = {
    //自定义校验
    phone: {
        rules: [
            {
                validator: (rule, value, cbfn) => {
                    const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
                    if (!reg.test(value)) {
                        cbfn('请输入正确的手机号码')
                    }
                    cbfn()
                },
            },
        ],
    },
    email: {
        rules: [
            {
                validator: (rule, value, cbfn) => {
                    const reg =
                        /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
                    if (!reg.test(value)) {
                        cbfn('请输入正确的邮箱')
                    }
                    cbfn()
                },
            },
        ],
    },
    gphone: {
        rules: [
            {
                validator: (rule, value, cbfn) => {
                    const reg = /^([0-9]{3,4}-)?[0-9]{7,8}$/
                    if (!reg.test(value)) {
                        cbfn('请输入正确的固定电话')
                    }
                    cbfn()
                },
            },
        ],
    }
}
export default validateRulesObj

使用：

 <a-form-item label="手机号">
        <a-input placeholder="手机号" v-decorator="['phone', validateRulesObj.phone]" />
 </a-form-item>

<script>
import validateRulesObj from "@/utils/decorator.js"
export default {
    data(){
        return {
            validateRulesObj
        }
    }
}
</script>

2、a-form-model验证

验证js---decorator.js

/**
 * 表单验证
 */
// 验证手机号
export function phoneCheck(rule, value, callbackFn) {
    const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
    if (!reg.test(value)) {
        callbackFn('请输入手机号码')
        return
    }
    callbackFn()
}
// 验证固定电话
export function gphoneCheck(rule, value, callbackFn) {
    const reg = /^([0-9]{3,4}-)?[0-9]{7,8}$/
    if (!reg.test(value)) {
        callbackFn('请输入正确的固定号码')
        return
    }
    callbackFn()
}
// 验证用户名，保证以字母开头  ^[a-z]\w{4,19}$
export function userNameCheck(rule, value, callbackFn) {
    const reg = /^[a-z]\w{7,19}$/
    if (!reg.test(value)) {
        callbackFn('设置用户名，以字母开头，8-20位')
        return
    }
    callbackFn()
}
// 验证密码
export function pwdCheck(rule, value, callbackFn) {
    const reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/
    if (!reg.test(value)) {
        callbackFn('请输入密码，密码由6-20位字母、字符或数字组成')
        return
    }
    callbackFn()
}
// 邮箱验证
export function emailCheck(rule, value, callbackFn) {
    const reg =  /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
    if (!reg.test(value)) {
        callbackFn('请输入正确的邮箱')
        return
    }
    callbackFn()
}

使用：

<a-form-model
    :model="form"
    :rules="rules"
>
    <a-form-model-item label="手机号码" prop="yphone">
       <a-input v-model="form.yphone" placeholder="请输入11位手机号" />
    </a-form-model-item>
</a-form-model>

<script>
import { phoneCheck, emailCheck } from "@/utils/decorator.js";
export default {
  data() {
    return {
      form: {},
      rules: {
        name: [
          {
            required: true,
            message: "请输入收货人姓名",
            trigger: "blur",
          },
        ],
        province: [
          {
            required: true,
            message: "请选择省份",
            trigger: "blur",
          },
        ],
        city: [
          {
            required: true,
            message: "请选择城市",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur",
          },
        ],
        yphone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            message: "请输入正确手机号",
            validator: phoneCheck.bind(this),
            trigger: "blur",
          },
        ],
        email: [
          {
            trigger: "blur",
            message: "请输入正确的邮箱",
            validator: emailCheck.bind(this),
          },
        ],
      },
    }
  }
}
</script>

3、密码确认

<a-form :form="form">
    <a-form-item label="新密码">
        <a-input
          type="password"
          placeholder="输入新密码"
          v-decorator="[
            'newPassword',
            {
              rules: [
                { required: true, message: '请输入新密码！' },
                {
                  validator: validateToNextPassword,
                },
              ],
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="确认密码">
        <a-input
          type="password"
          placeholder="再次输入密码确认"
          v-decorator="[
            'confirm',
            {
              rules: [
                { required: true, message: '请再次输入新密码！' },
                {
                  validator: compareToFirstPassword,
                },
              ],
            },
          ]"
        />
      </a-form-item>
</a-form>
<script>
    data(){
        return {
            form: this.$form.createForm(this)
        }
    },
    methods: {
        // 密码确认
    compareToFirstPassword(rule, value, callback) {
      const form = this.form
      if (value && value !== form.getFieldValue('newPassword')) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('请确认两次输入密码的一致性！')
      } else {
        callback()
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true })
      }
      callback()
    },
    }
</script>