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('請輸入正確網址！'));
    }
}