bootstrap +vue 实现输入框校验
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地址
2、是否手机号码或者固话
3、是否固话
4、是否手机号码
5、是否身份证号码
6、是否邮箱
7、合法url
8、验证内容是否包含英文数字以及下划线
9、自动检验数值的范围
10、验证数字输入框最大数值
11、验证是否1-99之间
12、验证是否整数
13、验证是否整数,非必填
14、 验证是否是[0-1]的小数
15、 验证是否是[1-10]的小数,即不可以等于0
16、验证是否是[1-100]的小数,即不可以等于0
17、验证是否是[0-100]的小数
18、验证端口是否在[0,65535]之间
19、验证端口是否在[0,65535]之间，非必填,isMust表示是否必填
20、小写字母
22、两位小数验证
23、是否大写字母
24、是否大小写字母
25、密码校验
26、中文校验
27、 账号校验
28 、纯数字校验
29、最多一位小数
rror(‘请输入账号’))
