嘿伙计，所以我写了一个vueapp，我试图使用像.trim（）和.replace这样的函数来清理表单中的数据。然而它似乎没有工作。我需要那些来验证表格。例如，在我想要修剪空格的几乎所有字段中，对于phoneNumber字段，我想要替换＆＃34;（＆＃34;和＆＃34;）＆＃34;和＆＃34; - ＆＃34;用空字符串。当他们输入它们。 继承人代码：
<?php ob_start();
session_start();
include('head.php');
include('header.php');
?>
<div id="signUpFormContainer">
<div id="signUpForm">
<!--USERNAME-->
<div class="inputDiv">
<p v-show="usernameLength==true && usernameHasCap==true && usernameHasNum==true && userexist==false">Username* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="userexist == true">Username* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Username Already Exists</span></i></p>
<p v-show="userexist==true" class="error">We are sorry but that username already exists.</p>
<p v-show="usernameLength==false && userName!='' && sub!=1 || usernameHasCap==false && sub!=1 && userName!='' && userexist==false || usernameHasNum==false && sub!=1 && userName!='' && userexist==false">Username* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Username must be at least 8 characters, Have a capital letter and contain a number</span></i></p>
<p v-show='userName=="" && sub!="1" && userexist==false'>Username* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Username must be at least 8 characters, Have a capital letter and contain a number</span></i></p>
<p v-show='sub==1 && usernameLength==false && userexist==false || sub==1 && usernameHasNum==false && userexist==false || sub==1 && usernameHasCap==false && userexist==false'>Username* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Username must be at least 8 characters, have a capital letter and contain a number</span></i></p>
<input v-model="userName" placeholder="Username" v-on:focus="showusernamerequirements">
<ul v-show="disunamer==true">
<li v-show="usernameLength==false || userName==''">Must contain at least 8 characters</li>
<li v-show="usernameHasCap==false">Must contain capital letter</li>
<li v-show="usernameHasNum==false">Must contain number</li>
</ul>
</div>
<!--END USERNAME-->
<!--PASSWORD-->
<div class="inputDiv">
<p v-show='passwordLengthMet==true && passwordHasCap==true && passwordHasNum==true'>Password* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show='passwordLengthMet==false && password!="" && sub!=1 || passwordHasCap==false && sub!=1 && password!="" || passwordHasNum==false && sub!=1 && password!="" '>Password* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Password must be at least 8 characters, Have a capital letter and contain a number</span></i></p>
<p v-show='password=="" && sub!="1"'>Password* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Password must be at least 8 characters, Have a capital letter and contain a number</span></i></p>
<p v-show='sub==1 && passwordLengthMet==false || sub==1 && passwordHasNum==false || sub==1 && passwordHasCap==false'>Password* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Password must be at least 8 characters, have a capital letter and contain a number</span></i></p>
<input type="password" v-model="password" placeholder="Password" v-on:focus="showpasswordrequirements">
<ul v-show="dispassr==true">
<li v-show="passwordLengthMet==false || password==''">Must contain at least 8 characters</li>
<li v-show="passwordHasCap==false">Must contain capital letter</li>
<li v-show="passwordHasNum==false">Must contain number</li>
</ul>
</div>
<!--END PASSWORD-->
<!--PASSWORDS MATCH-->
<div class="inputDiv">
<p v-show="passwordsMatch==true && password!=''">Confirm Password* <i class="fa fa-check-circle success"></i> Passwords Match</p>
<p v-show="passwordsMatch==false && password!='' || sub==1 && confirmPassword=='' || confirmPassword!='' && password==''">Confirm Password* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please make sure passwords match</span></i></p>
<p v-show="password=='' && sub==0 && confirmPassword==''">Confirm Password* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Confirm your password please</span></i></p>
<input type="password" v-model="confirmPassword" placeholder="Confirm Password" v-on:focus="showconfirmpasswordrequirements">
<ul v-show="disconfr==true">
<li class="blue" v-show="passwordsMatch==false">Please be sure your passwords match</li>
</ul>
</div>
<!--END PASSWORDS MATCH-->
<!--FIRSTNAME-->
<div class="inputDiv">
<p v-show="validFirstname==true">First name* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="validFirstname==false && sub==1">First Name* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter your firstname</span></i></p>
<p v-show='validFirstname==false && sub!="1"'>First Name* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please enter a firstname</span></i></p>
<input v-model="firstName" placeholder="Firstname" v-on:focus="showfirstnamerequirements">
<ul v-show='disfnamer==true'>
<li v-show="validFirstname==false">Please enter a firstname</li>
</ul>
</div>
<!--END FISTNAME-->
<!--LASTNAME-->
<div class="inputDiv">
<p v-show="validLastname==true">Last Name* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="validLastname==false && sub==1">Last Name* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter your lastname</span></i></p>
<p v-show='validLastname==false && sub!="1"'>Last Name* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please enter a lastname</span></i></p>
<input v-model="lastName" placeholder="Last name" v-on:focus="showlastnamerequirements">
<ul v-show='dislnamer==true'>
<li v-show="validLastname==false">Please enter a lastname</li>
</ul>
</div>
<!--END LASTNAME-->
<!--EMAIL-->
<div class="inputDiv">
<p v-show="validEmail==true">Email* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="validEmail==false && email!=='' || email=='' && sub==1">Email* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter a valid email</span></i></p>
<p v-show="email=='' && sub==0">Email* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please enter a valid email</span></i></p>
<input v-model="email" placeholder="jchang@example.com" v-on:focus="showemailrequirements">
<ul v-show='disemailr==true'>
<li v-show="validEmail==false">Please enter a valid email</li>
</ul>
</div>
<!--END EMAIL-->
<!--PHONE -->
<div class="inputDiv">
<p v-show="phoneLength==true && phoneHasNum==true && phoneNumber!=''">Phone* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="phoneLength==false && phoneNumber!='' || phoneHasNum==false && phoneNumber!='' || phoneNumber=='' && sub==1">Phone* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Phone Number must have at least 10 numbers and have no letters, parenthis or dashes</span></i></p>
<p v-show="phoneNumber=='' && sub==0">Phone* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Phone Number must have at least 10 numbers and have no letters it cannot contain parenthis or dashes</span></i></p>
<input v-model="phoneNumber" placeholder="Phone Number 1234567890" v-on:focus="showphonenumberrequirements" id="phoneNumber">
<ul v-show="disphoner==true">
<li v-show="phoneLength==false">Phone number must be 10 numbers long</li>
<li v-show="phoneHasNum==false || phoneNumber==''"> Phone number must contain only numbers</li>
</ul>
</div>
<!--END PHONE-->
<!--COMPANY NAME-->
<div class="inputDiv">
<p v-show="validCompanyName==true">Company Name* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="validCompanyName==false && companyName!='' || companyName==false && companyName=='' && sub==1">Company Name* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter your company name</span></i></p>
<p v-show="companyName=='' && sub==0">Company Name* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please enter your company name</span></i></p>
<input v-model="companyName" placeholder="Company Name" v-on:focus="showcompanynamerequirements">
<ul v-show="discompr==true">
<li v-show="validCompanyName==false">Please enter your company name</li>
</ul>
</div>
<!--END COMPANY NAME-->
<div class="inputButton">
<input v-on:click="makeAccount" id="addButton" type="button" value="Sign Up"></input>
</div>
</div>
<div id="footerContainer"></div>
<script>
var app = new Vue({
el: '#signUpForm',
data: {
userName: '',
password: '',
confirmPassword: '',
firstName: '',
lastName: '',
email: '',
sub: '',
dispassr: '',
disconfr: '',
disfnamer: '',
dislnamer: '',
disemailr: '',
disunamer: '',
disphoner: '',
discompr: '',
phoneNumber: '',
companyName: '',
userexist: ''
},
computed: {
passwordsMatch: function() {
if(this.password == this.confirmPassword && this.confirmPassword.trim()!='') {
return true;
} else {
return false;
}
},
passwordLengthMet: function() {
if(this.password.trim().length >= 8) {
return true;
} else {
return false;
}
},
passwordHasCap: function(){
if(/[A-Z]/.test(this.password)){return true;} else{return false;}
},
passwordHasNum: function(){
if(/[\d]/.test(this.password)){return true;} else{return false;}
},
validEmail: function() {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (!reg.test(this.email)) {
return false;
}
return true;
},
validLastname: function() {
if(this.lastName.trim().length<1){return false;} else {return true;}
},
validFirstname: function() {
if(this.firstName.trim().length<1){return false;} else{return true;}
},
usernameLength: function(){
if(this.userName.trim().length>=8){return true;} else{return false;}
},
usernameHasCap: function(){
if(/[A-Z]/.test(this.userName)){return true;} else{return false;}
},
usernameHasNum: function(){
if(/[\d]/.test(this.userName)){return true;} else{return false;}
},
validCompanyName: function(){
if(this.companyName.trim().length<1){return false;} else{return true;}
},
phoneHasNum: function(){
this.phoneNumber.replace("(","");
this.phoneNumber.replace(")","");
this.phoneNumber.replace("-","");
if(isNaN(this.phoneNumber)){return false;} else {return true;}
},
phoneLength: function(){
if(this.phoneNumber.trim().length==10){return true;} else{return false;}
}
},
created: function() {
this.userexist=false;
},
watch: {
},
methods: {
makeAccount: function() {
this.sub=1;
if(this.usernameLength && this.usernameHasCap && this.usernameHasNum && this.validFirstname && this.validLastname && this.validEmail && this.passwordHasCap && this.passwordHasNum && this.passwordLengthMet && this.passwordsMatch && this.validCompanyName && this.phoneNumber!='' && this.phoneHasNum && this.phoneLength) {
var jsonString = JSON.stringify({
userName: this.userName,
firstName: this.firstName,
lastName: this.lastName,
password: this.password,
email: this.email,
phoneNumber: this.phoneNumber,
companyName: this.companyName
});
$.ajax({
url: 'makeAccount.php',
dataType: 'json',
type: 'post',
contentType: 'application/json',
dataType: 'json',
data: jsonString,
error: function(data){
alert('error');
window.location.href='error.php';
},
success: function(data){
console.log(data);
alert('success');
this.userexist=data.userexist;
if(this.userexist==false){window.location.href='successfullycreated.php?userName='+this.userName;}
}.bind(this)
});
}
},
showpasswordrequirements: function(){
this.sub=0;
this.dispassr=true;
this.disconfr=false;
this.disfnamer=false;
this.dislnamer=false;
this.disemailr=false;
this.disunamer=false;
this.disphoner=false;
this.discompr=false;
},
showconfirmpasswordrequirements: function(){
this.sub=0;
this.dispassr=false;
this.disconfr=true;
this.disfnamer=false;
this.dislnamer=false;
this.disemailr=false;
this.disunamer=false;
this.disphoner=false;
this.discompr=false;
},
showfirstnamerequirements: function(){
this.sub=0;
this.dispassr=false;
this.disconfr=false;
this.disfnamer=true;
this.dislnamer=false;
this.disemailr=false;
this.disunamer=false;
this.disphoner=false;
this.discompr=false;
},
showlastnamerequirements: function(){
this.sub=0;
this.dispassr=false;
this.disconfr=false;
this.disfnamer=false;
this.dislnamer=true;
this.disemailr=false;
this.disunamer=false;
this.disphoner=false;
this.discompr=false;
},
showemailrequirements: function(){
this.sub=0;
this.dispassr=false;
this.disconfr=false;
this.disfnamer=false;
this.dislnamer=false;
this.disemailr=true;
this.disunamer=false;
this.disphoner=false;
this.discompr=false;
},
showusernamerequirements: function(){
this.sub=0;
this.userexist=0;
this.dispassr=false;
this.disconfr=false;
this.disfnamer=false;
this.dislnamer=false;
this.disemailr=false;
this.disunamer=true;
this.disphoner=false;
this.discompr=false;
},
showphonenumberrequirements: function(){
this.sub=0;
this.disphoner=true;
this.dispassr=false;
this.disconfr=false;
this.disfnamer=false;
this.dislnamer=false;
this.disemailr=false;
this.disunamer=false;
this.discompr=false;
},
showcompanynamerequirements: function(){
this.sub=0;
this.disphoner=false;
this.dispassr=false;
this.disconfr=false;
this.disfnamer=false;
this.dislnamer=false;
this.disemailr=false;
this.disunamer=false;
this.discompr=true;
}
}
});
</script>
<?php include('foot.php');?>
答案 0 :(得分：1)
您可以让Vue通过将输入的标记从v-model更改为v-model.trim来自动修剪输入值。例如：v-model.trim="password"。您可以在此处查看文档：{{3}}
要在用户输入时从电话号码中删除非数字字符，请在输入字段中添加一个监听器以收听input事件：
<input v-model="phoneNumber" placeholder="Phone Number 1234567890" v-on:focus="showphonenumberrequirements" id="phoneNumber" v-on:input="removeNonDigitCharacters">
然后，实现事件处理程序，如：
methods: {
removeNonDigitCharacters: function() {
this.phoneNumber = this.phoneNumber.replace(/[^0-9]+/g, '');
}
}