validate.js（常用验证）

 

Installing：

$ npm install --save validate.js
var validate = require("validate.js");

使用过程：

html

<el-form
                    class="login_box"
                    ref="user"
                    :model="user"
                    :rules="rules2">
                    <div class="role">观众</div>
                    <div class="message">
                        <div class="mes_box">
                            <el-form-item class="mes_li" label="手机号" prop="phone">
                                <input type="text" placeholder="" class="mes_text" v-model="user.phone">
                            </el-form-item>
                            <el-form-item class="mes_li" label="验证码" prop="pas">
                                <input type="password" placeholder="" class="mes_text mes_text_short" v-model="user.pas">
                                <img class="checked" v-if="codeShow" @click="validateBtn()" src="../assets/images/login/checked.png" alt="">
                                <div class="checked checkTime" v-if="!codeShow">{{ btnTitle }}</div>
                            </el-form-item>
                            <div class="mes_but">
                                <div class="but">
                                    <img @click="hjSubmite('user')" src="../assets/images/login/login.png" alt="">
                                </div>
                                <div class="but">
                                    <img @click="torregister()" src="../assets/images/login/register.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </el-form>

js

<script>
    import {
        validateNull, 
        validateLength, 
        validateSpace, 
        validateSpecial,
        validateMobile,
        validateNumber
    } from '../assets/javascript/validate.js';
    export default {
        name: "login",
        data() {
            return {
                codeShow:true,
                btnTitle:'',
                user: {
                    phone: '',
                    pas: ''
                },
                rules2: {   // 表单验条件
                    phone: [
                        {validator: validateNull, trigger: 'blur'},//表单验证填写（必填项不能为空）
                        {validator: validateLength, trigger: 'blur'},//表单验证填写（长度验证）
                        {validator: validateSpace, trigger: 'blur'},//表单中出现空格验证
                        {validator: validateSpecial, trigger: 'blur'},  //表单中输入中出现特殊字符
                        {validator: validateMobile, trigger: 'blur'}   //手机号验证
                        
                    ],
                    pas: [
                        {validator: validateNull, trigger: 'blur'},//表单验证填写（必填项不能为空）
                        {validator: validateLength, trigger: 'blur'},//表单验证填写（长度验证）
                        {validator: validateSpace, trigger: 'blur'},//表单中出现空格验证
                        {validator: validateNumber, trigger: 'blur'}//表单验证填写 (必须为数字)
                    ]
                }
            }
        },
        created() {
            
        },
        methods: {
            
        }
    }
</script>

 

validate.js文件

// 表单验证不能出现中文
export function validateChinese(rule, value, callback) {
    const regNu = /^[a-zA-Z0-9_]{0,}$/;
    if (!regNu.test(value)) {
        return callback(new Error('不能出现中文字符!'));
    } else {
        callback();
    }
}
//表单验证填写 (必须为数字)
export function validateNumber(rule, value, callback) {
    const regNu = /^[0-9]*$/;
    if (!regNu.test(value)) {
        return callback(new Error('请输入数字'));
    } else {
        callback();
    }
};
//表单验证填写（必填项不能为空）
export function validateNull(rule, value, callback) {
    if (value === "") {
       return callback(new Error('必填项不能为空！'));
    } else {
        callback();
    }
};

//表单验证填写（长度验证）
export function validateLength (rule, value, callback) {
    if (value.length >= 14 || value.length < 2) {
          return callback(new Error('长度为3位 ~ 14位！'));
    } else {
        callback();
    }
};

//表单中出现空格验证
export function validateSpace(rule, value, callback) {
    if (typeof value != 'string') {
        console.warn('表单验证接收value的类型错误');
    }
    if (value.indexOf(" ") == -1) {
        callback();
    } else {
        return callback(new Error('不能包含空格！'));
    }
};

// 表单中输入中出现特殊字符
export function validateSpecial(rule, value, callback) {
    const regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
    const regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
    if (regEn.test(value) || regCn.test(value)) {
        return callback(new Error('不能包含特殊字符！'));
    } else {
        callback();
    }
};

//表单中输入手机号验证
export function validateMobile(rule, value, callback) {
    const mobile = /^[1][3,4,5,7,8,6][0-9]{9}$/;
    if (mobile.test(value)) {
        callback();
    } else {
        return callback(new Error('手机号输入错误！'));
    }
}

//表单中输入邮箱验证
export function validateEmail(rule, value, callback) {
    const email = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
    if (email.test(value)) {
        callback();
    } else {
        return callback(new Error('邮箱输入错误！'));
    }
}
//验证网址
export function validateHttps(rule, value, callback) {
    const htps = /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
    if (htps.test(value)) {
        callback();
    } else {
        return callback(new Error('请输入正确网址！'));
    }
}