Php 如何在vue js中使用number和regex进行验证?
我必须验证只接受数字值的文本框,数字必须以7、8或9(regex)开头 我已经完成了maxlength、minlength和required规则。它们工作得很好。但我不知道如何验证只接受数字和正则表达式。我试过一些语法,但不起作用Php 如何在vue js中使用number和regex进行验证?,php,regex,vuejs2,vue-component,element,Php,Regex,Vuejs2,Vue Component,Element,我必须验证只接受数字值的文本框,数字必须以7、8或9(regex)开头 我已经完成了maxlength、minlength和required规则。它们工作得很好。但我不知道如何验证只接受数字和正则表达式。我试过一些语法,但不起作用 <tab-content title="RELATIONSHIP DETAILS" icon="ti-info-alt" :before-change="validateFirstStep"> &
<tab-content title="RELATIONSHIP DETAILS" icon="ti-info-alt" :before-change="validateFirstStep">
<el-form :inline="true" :model="formInline1" class="demo-form-inline" :rules="rules1" ref="ruleForm1">
<el-form-item label="Mobile Number" prop="mobno">
<el-input maxlength="10" v-model="formInline1.mobno" placeholder="Mobile Number"></el-input>
</el-form-item>
</el-form>
</tab-content>
<script>
const app= new Vue({
el: '#app',
data() {
return {
formInline1: {
mobno:'',
},
rules1: {
mobno: [{
required: true,
message: 'Please enter Mobile Number',
trigger: 'blur'
}, {
min: 10,
max: 10,
message: 'Length must be 10',
trigger: 'blur'
}],
}
},
methods: {
onComplete: function() {
alert('Yay. Done!');
},
validateFirstStep() {
return new Promise((resolve, reject) => {
this.$refs.ruleForm1.validate((valid) => {
resolve(valid);
});
})
},
}
})
</script>
const app=新的Vue({
el:“#应用程序”,
数据(){
返回{
formInline1:{
mobno:“”,
},
规则1:{
莫布诺:[{
要求:正确,
信息:“请输入手机号码”,
触发器:“模糊”
}, {
民:10,,
最高:10,
消息:“长度必须为10',
触发器:“模糊”
}],
}
},
方法:{
onComplete:function(){
警惕(“耶,完成!”);
},
validateFirstStep(){
返回新承诺((解决、拒绝)=>{
此.$refs.ruleForm1.validate((有效)=>{
决议(有效);
});
})
},
}
})
如果您需要匹配任何长度为10位的数字,从7、8或9开始,那么您可以这样使用:^[7-9]\d{9}$
(示例)
这将匹配任何以7、8或9开头的数字,然后是其他9位数字。验证规则如下:
{
触发器:“模糊”,
验证器(规则、值、回调){
如果(/^[789]\d{9}$/.test(value)){
回调();
}否则{
回调(新错误('手机号码必须是从7、8或9'开始的10位数字”);
}
}
}
不带参数调用回调表示成功,带错误调用回调表示验证失败
RegExp检查7、8或9,后面跟着9个其他数字。严格来说,没有必要这么精确,因为已经有一个验证规则检查总共10个字符。例如,/^[789]\d*$/
,如果我们知道有10个字符,也可以使用
实际上,最好将其分为两部分,一部分确认所有数字为数字,另一部分检查第一个数字为7、8或9。这将允许为这两种情况显示不同的错误消息
下面是一个完整的示例:
const-app=新的Vue({
el:“#应用程序”,
数据(){
返回{
formInline1:{
mobno:“”,
},
规则1:{
莫布诺:[{
要求:正确,
信息:“请输入手机号码”,
触发器:“模糊”
}, {
民:10,,
最高:10,
消息:“长度必须为10',
触发器:“模糊”
}, {
触发器:“模糊”,
验证器(规则、值、回调){
如果(/^[789]\d{9}$/.test(value)){
回调();
}否则{
回调(新错误('手机号码必须是从7、8或9'开始的10位数字”);
}
}
}]
}
}
}
});
hey@skirtle这工作非常好,但是你能把它分成两部分吗?数字验证不同,正则表达式验证也不同。使用正则表达式数字检查代替正则表达式数字检查有没有更短的方法来检查数字validation@imnik18我已经做了一些更新。我不知道验证器有什么特殊属性来检查所有的字符是数字。我不清楚你为什么不想使用RegExp。你让我开心了。谢谢。第二个例子看起来比第一个简单多了