element ui的表单验证

首先这个是我一些常用的表单验证我整理的一份

/*大于0小于100数字*/

export function validateNumber( val) {

const reg = / ^ \d\. ( [1-9] {1,2}| [0-9][1-9] ) $|^ [1-9]\d {0,1} ( \.\d {1,2} ) {0,1}$|^ 100( \. 0 {1,2} ) {0,1}$ /;

return reg. test(val)

}

export function validdateMobile( val) {

const length = val.length;

var mobile = / ^ 1( [358][0-9] | 4 [579] | 66 | 7 [0135678] | 9 [89] ) [0-9] {8}$ /;

return length == 11 && mobile. test(val)

}

export function validPassword( val) {

const reg = / ^ (?! [0-9] +$ )(?! [a-zA-Z] +$ ) [0-9A-Za-z] {6,21}$ /;

return reg. test(val)

}

//联系方式

export function validContact( val){

var reg = /( ^ [0-9] {3,20}$ )/;

return reg. test(val);

}

// export function validContact(val){

// var reg =/(^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$)|(^((\(\d{3}\))|(\d{3}\-))?(1[358]\d{9})$)/;

// return reg.test(val);

// }

//身份证

export function card( val){

var reg = /( ^ \d {15}$ ) | ( ^ \d {18}$ ) | ( ^ \d {17} ( \d | X | x) $ )/;

return reg. test(val);

}

//验证数字包括浮点数

export function validNumber( val){

var reg = / ^ [0-9] + \. ? [0-9] *$ /;

return reg. test(val);

}

//金额验证，保留两位小数

export function validMoney( val){

var reg = / ^ ( [1-9]\d {0,8}| 0)( \.\d {1,6} ) ?$ /;

return reg. test(val);

}

//验证合法的姓名

export function validName( val){

var reg = / ^ [\u4e00-\u9fa5] + (· [\u4e00-\u9fa5] + ) *$ /;

return reg. test(val);

}

//邮箱验证

export function validemail( val){

var reg = / ^ [A-Za-z0-9\u4e00-\u9fa5] + @ [a-zA-Z0-9_-] + ( \.[a-zA-Z0-9_-] + ) +$ /;

return reg. test(val);

}

  再别的组件要用的时候先引入   

  import { validdateMobile,card,validemail } from "@/service/rule_filter";

在data里边验证

    data(){

    

//表单验证

             //验证手机号

             var checkphone = ( rule, value, callback) =>{

                 if ( !value) {

                     return callback( new Error( '手机号不能为空'));

                } else if ( validdateMobile(value)) {

                     return callback();

                } else{

                     return callback( new Error( '请输入正确的手机号'));

                }

            };

             //验证身份证号

             var checkcard = ( rule, value, callback) => {

                 if ( !value) {

                     return callback( new Error( '身份证号不能为空'));

                } else if ( card(value)) {

                     return callback();

                } else{

                     return callback( new Error( '请输入正确的身份证号'));

                }

            }

             //验证邮箱

             var checkemail = ( rule, value, callback) => {

                 if ( !value) {

                     return callback( new Error( '邮箱不能为空'));

                } else if ( validemail(value)) {

                     return callback();

                } else{

                     return callback( new Error( '请输入正确的邮箱'));

                }

            }

            return {

                ruleForm:{

                    uPhone: "", //电话

                    uCard: "", //身份证

                    uEmail: "", //邮箱

                },

                rules2: {

                    uPhone: [

                        { required: true,validator: checkphone, trigger: 'blur' },

                    ],

                    uCard:[

                        { required: true,validator: checkcard, trigger: 'blur' },

                    ],

                    uEmail:[

                        { required: true,validator: checkemail, trigger: 'blur' },

                    ],

                    

                },

}

    下边是html部分   

        < el-dialog :title="layerTitle" :visible.sync="adddialogFormVisible" width= "664px" center >

            < el-form ref= "ruleForm" :inline=" true" :model="ruleForm" :rules="rules2" label-width= "100px" >

                    < el-form-item label= "手机号" prop= "uPhone">

                        < el-input v-model="ruleForm.uPhone"></ el-input>

                    </ el-form-item>

                

                    < el-form-item label= "身份证号" prop= "uCard">

                        < el-input v-model="ruleForm.uCard"></ el-input>

                    </ el-form-item>

                

                    < el-form-item label= "邮箱" prop= "uEmail">

                        < el-input v-model="ruleForm.uEmail"></ el-input>

                    </ el-form-item>

                    < br>

                    < el-form-item>

                        < el-button type= "primary" @click=" submitForm( 'ruleForm')">确定</ el-button>

                        < el-button @click=" resetForm( 'ruleForm')">取消</ el-button>

                    </ el-form-item>

                

                

            </ el-form>

        </ el-dialog>