一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    vant+veeValiDate表单验证的使用

    技术 110 2019-07-24 11:28

    1.安装VeeValidate

    npm install vee-validate --save
    

    2.建立独立的valiDate.js文件 来存放验证规则和一些中文。

    import { Validator } from 'vee-validate'
    const customizeVal = () => {
    let formatFileSize = function (size) {
    let units = ['Byte', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
    let threshold = 1024
    size = Number(size) * threshold
    let i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(threshold))
    return (size / Math.pow(threshold, i)).toFixed(2) * 1 + ' ' + units[i]
    }
    let fieldName = '' // 原来的i18n的fieldName会显示绑定的name值,就是英文,实际项目中不需要
    console.log(fieldName)
    Validator.localize('zh_CN', {
    name: 'zh_CN',
    attributes: {},
    messages: {
    _default: () => `${fieldName}无效`,
    after: (field, [target]) => `${fieldName}必须在${target}之后`,
    alpha_dash: () => `${fieldName}能够包含字母数字字符、破折号和下划线`,
    alpha_num: () => `${fieldName}只能包含字母数字字符`,
    alpha_spaces: () => `${fieldName}只能包含字母字符和空格`,
    alpha: () => `${fieldName}只能包含字母字符`,
    before: (field, [target]) => `${fieldName}必须在${target}之前`,
    between: (field, [min, max]) => `${fieldName}必须在${min}与${max}之间`,
    confirmed: (field, [confirmedField]) =>
    `${fieldName}不能和${confirmedField}匹配`,
    credit_card: () => `${fieldName}格式错误`,
    date_between: (field, [min, max]) => `${fieldName}必须在${min}和${max}之间`,
    date_format: (field, [format]) => `${fieldName}必须符合${format}格式`,
    decimal: (field, [decimals = '*'] = []) =>
    `${fieldName}必须是数字,且能够保留${
    decimals === '*' ? '' : decimals
    }位小数`,
    digits: (field, [length]) =>
    `${fieldName}必须是数字,且精确到${length}位数`,
    dimensions: (field, [width, height]) =>
    `${fieldName}必须在${width}像素与${height}像素之间`,
    email: () => `${fieldName}不是一个有效的邮箱`,
    ext: () => `${fieldName}不是一个有效的文件`,
    image: () => `${fieldName}不是一张有效的图片`,
    included: () => `${fieldName}不是一个有效值`,
    integer: () => `${fieldName}必须是整数`,
    ip: () => `${fieldName}不是一个有效的地址`,
    length: (field, [length, max]) => {
    if (max) {
    return `${fieldName}长度必须在${length}到${max}之间`
    }
    return `${fieldName}长度必须为${length}`
    },
    max: (field, [length]) => `${fieldName}不能超过${length}个字符`,
    max_value: (field, [max]) => `${fieldName}必须小于或等于${max}`,
    mimes: () => `${fieldName}不是一个有效的文件类型`,
    min: (field, [length]) => `${fieldName}必须至少有${length}个字符`,
    min_value: (field, [min]) => `${fieldName}必须大于或等于${min}`,
    excluded: () => `${fieldName}不是一个有效值`,
    numeric: () => `${fieldName}只能包含数字字符`,
    regex: () => `${fieldName}格式无效`,
    required: () => `${fieldName}不能为空`,
    size: (field, [size]) => `${fieldName}必须小于${formatFileSize(size)}`,
    url: () => `${fieldName}不是一个有效的url`
    }
    })
    
    // 手机号码验证
    Validator.extend('mobile', {
    getMessage: () => `请输入正确的手机号码`,
    validate: value =>
    value.length === 11 &&
    /^(((13[0-9]{1})|(14[57]{1})|(15[012356789]{1})|(17[03678]{1})|(18[0-9]{1})|(19[89]{1})|(16[6]{1}))+\d{8})$/.test(
    value
    )
    })
    }
    //暴露出去
    export default customizeVal
    

    3.在main.js进行全局引入:

    import VeeValidate from 'vee-validate'
    import customizeVal from '../src/components/common/validate'
    Vue.use(VeeValidate)
    Vue.use(customizeVal)
    

    4.在页面进行使用:

    <van-field
    v-model="username"
    required
    clearable
    label="用户名"
    placeholder="请输入用户名"
    name="username"
    v-validate="'required|max:10'"
    :error-message="errors.first('username')"
    :error="errors.has('username')"
    />
    参数介绍:
    name:用于区分验证,可自定义
    v-validate:放验证规则,可放多个规则用 | 分开
    errors.first('username'): 错误的文本提示
    errors.has('username'): 验证的结果tue或者false
    

    5.所有valiDate通过后再进行数据接口请求:

    methods: {
    login () {
    this.$validator.validateAll().then(res => {
    if (res) {
    this.isLogin = true
    axios.post(api.login, {
    userName: this.username,
    passWord: this.password
    })
    .then(res => {
    if (res.data.message === true) {
    Toast.success('登录成功!')
    this.$router.push('/main')
    } else if (res.data.message === false) {
    Toast.fail('密码错误!')
    } else if (res.data.message === '用户名不存在') {
    Toast.fail('用户名不存在!')
    }
    })
    .then(() => {
    this.isLogin = false
    })
    }
    })
    }
    },
    

    文章评论

    评论列表(0