vue+bootstrap 输入框校验

2022-02-25 14:02:01 阅读：177 来源： 互联网

标签：vue callback bootstrap value else newError 输入框 test 输入

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)

标签：vue,callback,bootstrap,value,else,newError,输入框,test,输入
来源： https://blog.csdn.net/ifspirt/article/details/123131534

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue+bootstrap 输入框校验

bootstrap +vue 实现输入框校验

1、导入所需要的文件

2、校验手机号

3 vue代码

代码实现

扩展实例

callback()

1、是否合法IP地址

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

3、是否固话

4、是否手机号码

5、是否身份证号码

6、是否邮箱

7、合法url