vue+bootstrap 输入框校验

2023-10-07 12:51:52

bootstrap +vue 实现输入框校验

本文校验的函数转载自 https://zhuanlan.zhihu.com/p/143981091

1、导入所需要的文件

不会的具体网上搜索

<script src="../js/jquery-2.1.1.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 		crossorigin="anonymous">
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

2、校验手机号

<div id="app">
    <div class="e">
        <label>手机号</label>
        <!--- 
			@blur="getCode" 失去焦点时会触发
	---->
        <input class="txt phonenum" maxlength="11" type="text" id="phonenum" @blur="getCode" v-model="phone" @input="getCode" placeholder="请输入手机号">
        <!--- 触发条件时信息会输出-->
        <p class="err" id="err_phonenum" v-show="phoneerrmsg">
            <span style="color: red;">{{phoneerrmsg}}</span>
        </p>
    </div>

3 vue代码

<script>
    new Vue({
        el: '#app',
        data: {
            phoneerrmsg:'', //校验电话时输出的信息
            phone:'',
        },
        created: function () {},
        methods: {
            //点击获取验证码的逻辑
            getCode(){
                //获取手机验证码
                let reg = /^1[3-9][0-9]{9}$/;  //以1开头第二位数字为3-9 的11位数字
                if(this.phone.length == 0 || this.phone==''){
                    this.phoneerrmsg = '请输入手机号';
                    
                    return false;
                }else if(!reg.test(this.phone)){
                    this.phoneerrmsg = '请输入正确的手机号';
                    return false;
                }else{
                    this.phoneerrmsg = '';
                }
                
               
            }
</script>

效果展示

输入错误号码位数时

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="../js/jquery-2.1.1.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
		integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 		crossorigin="anonymous">
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

    <div id="app">
    <div class="e">
        <label>手机号</label>
        <input class="txt phonenum" maxlength="11" type="text" id="phonenum" @blur="getCode" v-model="phone" @input="getCode" placeholder="请输入手机号">
        <p class="err" id="err_phonenum" v-show="phoneerrmsg"><span style="color: red;">{{phoneerrmsg}}</span></p>
    </div>
    <div class="e">
        <label>身份证</label>
        <input class="txt phonenum" maxlength="18" type="text" id="shenfen" @blur="shenfen" v-model="ID" @input="shenfen" placeholder="请输入身份证号">
        <p class="err" id="err_phonenums" v-show="IDmessage"><span style="color: red;">{{IDmessage}}</span></p>
    </div>
    <div class="e">
        <label>邮箱</label>
        <input class="txt phonenum" maxlength="18" type="text" id="email" @blur="validateEMail" v-model="email" @input="validateEMail" placeholder="请输入邮箱">
        <p class="err" id="err_phonenums" v-show="emailmessage"><span style="color: red;">{{emailmessage}}</span></p>
    </div>
    
</div>
    
    
    <script>
    new Vue({
        el: '#app',
        data: {
            phoneerrmsg:'', //校验电话时输出的信息
            phone:'',
            ID:'',
            IDmessage:'', //校验身份证时输出的信息
            email:'',
            emailmessage:'', //校验邮箱时输出的信息

        },
        created: function () {},
        methods: {
            //点击获取验证码的逻辑
            getCode(){
                //获取手机验证码
                let reg = /^1[3-9][0-9]{9}$/;  //以1开头第二位数字为3-9 的11位数字
                if(this.phone.length == 0 || this.phone==''){
                    this.phoneerrmsg = '请输入手机号';
                    return false;
                }else if(!reg.test(this.phone)){
                    this.phoneerrmsg = '请输入正确的手机号';
                    return false;
                }else{
                    this.phoneerrmsg = '';
                }
                
               
            },
           
            shenfen(){
                
                constreg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                if(this.ID==''||this.ID==undefined||this.ID==null){
                    this.IDmessage='请输入号码';
                    return false;
                }else {
                    if((!constreg.test(this.ID)) && this.ID !='') {
                        // callback(newError('请输入正确的身份证号码'));
                        this.IDmessage="请输入正确的身份证号码";
                        return false;
                    } else {
                        this.IDmessage='';
                    }
                }
                
            },
            validateEMail() {
                constreg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
                if(this.email==''||this.email==undefined||this.email==null){
                    this.emailmessage='请输入邮箱';
                }else{
                    if(!constreg.test(this.email)){
                        this.emailmessage='请输入正确邮箱';
                    } else {
                        this.emailmessage='';

                    }
                }
            }

        },
    })
</script>
</body>
</html>

扩展实例

value是v-model绑定的数值

this.message: 错误信息

callback()

callback()是一个函数你可以自定义输出信息

例如 this.message=’’;

1、是否合法IP地址

if(value==’’||valueundefined||valuenull){
callback();
}else {
constreg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;if((!reg.test(value)) && value !=’’) {
callback(newError(‘请输入正确的IP地址’));
} else {
callback();
}
}
}

2、是否手机号码或者固话

function validatePhoneTwo() {
constreg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;;
if(value ==’’|| value == undefined || value ==null) {
callback();
} else {
if((!reg.test(value)) && value !=’’) {
callback(newError(‘请输入正确的电话号码或者固话号码’));
} else {
callback();
}
}
}

3、是否固话

function validateTelphone() {
constreg =/0\d{2,3}-\d{7,8}/;
if(value==’’||valueundefined||valuenull){
callback();
}else {
if((!reg.test(value)) && value !=’’) {
callback(newError(‘请输入正确的固定电话）’));
} else {
callback();
}
}
}

4、是否手机号码

function validatePhone() {
constreg =/¹[3-9][0-9]{9}$/;
if(value==’’||valueundefined||valuenull){
callback();
}else {
if((!reg.test(value)) && value !=’’) {
callback(newError(‘请输入正确的电话号码’));
} else {
callback();
}
}
}

5、是否身份证号码

function validateIdNo() {
constreg = /(^{\d{15}$)|(^\d{18}$)|(}\d{17}(\d|X|x)$)/;
if(value==’’||valueundefined||valuenull){
callback();
}else {
if((!reg.test(value)) && value !=’’) {
callback(newError(‘请输入正确的身份证号码’));
} else {
callback();
}
}
}

6、是否邮箱

function validateEMail() {
constreg =/^([a-zA-Z0-9]+[-_.]?)+@[a-zA-Z0-9]+.[a-z]+$/;
if(value==’’||valueundefined||valuenull){
callback();
}else{
if(!reg.test(value)){
callback(newError(‘请输入正确的邮箱’));
} else {
callback();
}
}
}

7、合法url

function validateURL() {
consturlregex = /^(https?|ftp)

码农公寓

bootstrap +vue 实现输入框校验

1、导入所需要的文件

2、校验手机号

3 vue代码

代码实现

扩展实例

callback()

1、是否合法IP地址

2、是否手机号码或者固话

3、是否固话

4、是否手机号码

5、是否身份证号码

6、是否邮箱

7、合法url

相关文章