Javascript 如何使用Vue.js进行表单向导验证
我正在使用Vue.Js进行一个小项目，我按照视频教程创建了向导，但现在我尝试使用我已经创建的两个css类“is valid”和“is invalid”验证表单，但我的验证不起作用，这是我的代码Javascript 如何使用Vue.js进行表单向导验证,javascript,vue.js,Javascript,Vue.js,我正在使用Vue.Js进行一个小项目，我按照视频教程创建了向导，但现在我尝试使用我已经创建的两个css类“is valid”和“is invalid”验证表单，但我的验证不起作用，这是我的代码 <div class="modal-content tx-14"> <div class="p-0 bg-ui-01"> <ul class="nav nav-ta
<div class="modal-content tx-14">
<div class="p-0 bg-ui-01">
<ul class="nav nav-tabs nav-justified" id="myTab3" role="tablist">
<li class="nav-item m-0">
<a class="nav-link border-0 rounded-0" id="home-tab3" data-toggle="tab" href="#home3" role="tab" aria-controls="home" aria-selected="true" :class="{'active':current_step == 1}" @click.prevent="goToStep(1)">Website</a>
</li>
<li class="nav-item m-0">
<a class="nav-link border-0 rounded-0" id="profile-tab3" data-toggle="tab" href="#profile3" role="tab" aria-controls="profile" aria-selected="false" :class="{'disabled':max_step < 2, 'active': current_step == 2}" @click.prevent="goToStep(2)">Location</a>
</li>
<li class="nav-item m-0">
<a class="nav-link border-0 rounded-0" id="contact-tab3" data-toggle="tab" href="#contact3" role="tab" aria-controls="contact" aria-selected="false" :class="{'disabled':max_step < 3, 'active': current_step == 3}" @click.prevent="goToStep(3)">Keywords</a>
</li>
<li class="nav-item m-0">
<a class="nav-link border-0 rounded-0" id="contact-tab3" data-toggle="tab" href="#contact4" role="tab" aria-controls="contact" aria-selected="false" :class="{'disabled':max_step < 4, 'active': current_step == 4}" @click.prevent="goToStep(4)">Crawler</a>
</li>
<li class="nav-item m-0">
<a class="nav-link border-0 rounded-0" id="contact-tab3" data-toggle="tab" href="#contact4" role="tab" aria-controls="contact" aria-selected="false" :class="{'disabled':max_step < 5, 'active': current_step == 5}" @click.prevent="goToStep(5)">Competition</a>
</li>
</ul>
</div>
<div class="modal-body">
<div class="tab-content" id="myTabContent">
<div class="fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" v-show="current_step == 1">
<h4 class="text-center">Create Your Project</h4>
<p class="text-center">Enter your website informations, so you can track and improve your SEO traffic and keep an eye on the competition.</p>
<div class="row row-sm">
<div class="col-sm-12">
<div class="form-group">
<input type="url" id="project_url" v-model="rules.project_url.string" class="form-control" placeholder="Project URL">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" id="project_name" v-model="rules.project_name.string" placeholder="Project name">
</div>
</div>
</div>
</div>
<div id="location" role="tabpanel" aria-labelledby="profile-tab" v-show="current_step == 2">
<h4 class="text-center">Choose Your Location</h4>
<p class="text-center">
Enter all of the countries or cities you do business in or want traffic from. We recommend that you add at least 3 locations.
</p>
<div class="row row-sm">
<div class="col-sm-4">
<div class="form-group">
<select class="custom-select">
<option selected>Select Engine</option>
<option value="1">Google</option>
<option value="2">Google Mobile</option>
</select>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input type="text" class="form-control" placeholder="Target Location">
</div>
</div>
</div>
<div class="row row-sm">
<div class="col-sm-4">
<div class="form-group">
<select class="custom-select">
<option selected>Select Engine</option>
<option value="1">Google</option>
<option value="2">Google Mobile</option>
</select>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input type="text" class="form-control" placeholder="Target Location">
</div>
</div>
</div>
</div>
<div id="keywords" role="tabpanel" aria-labelledby="contact-tab" v-show="current_step == 3">
<h4 class="text-center">Add Keywords</h4>
<p class="text-center">
Choose the keywords you would like to track across the selected search engines. Track on the national level, or add locations to track on the local level. Add labels to group keywords by topic.
</p>
<textarea class="form-control" cols="30" rows="10" placeholder="Add separated keywords by comma ex: pasta,fish"></textarea>
</div>
<div id="crawling" role="tabpanel" aria-labelledby="contact-tab" v-show="current_step == 4">
<h4 class="text-center">Set Crawl Limit</h4>
<p class="text-center">
We crawl your site weekly to surface technical site issues that may be impacting your SEO performance. Select the number of pages you’d like to have crawled on this site.
</p>
<div class="row row-sm">
<div class="col-sm-4">
<div class="form-group">
<select class="custom-select">
<option value="5000">5,000</option>
<option value="10000">10,000</option>
<option value="20000">20,000</option>
<option value="30000">30,000</option>
<option value="40000">40,000</option>
<option value="50000">50,000</option>
<option value="75000">75,000</option>
<option value="100000">100,000</option>
<option value="250000">250,000</option>
<option value="450000">450,000</option>
</select>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<select class="custom-select">
<option selected>Whole Website</option>
<option value="1">Exclude sub-domains</option>
<option value="2">Follow sitemap</option>
</select>
</div>
</div>
</div>
</div>
<div id="crawling" role="tabpanel" aria-labelledby="contact-tab" v-show="current_step == 5">
<h4 class="text-center">Benchmark vs Competitors</h4>
<p class="text-center">
We will track competitive link and keyword metrics for these sites.
</p>
<div class="row row-sm">
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" placeholder="Target Location">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" placeholder="Target Location">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" placeholder="Target Location">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" placeholder="Target Location">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary tx-13" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary tx-13" @click="advanceStep">
<span v-if="max_step === 5">Submit</span>
<span v-else>Next</span>
</button>
</div>
</div>
-
-
-
-
-
创建您的项目
输入您的网站信息，以便跟踪和提高您的SEO流量，并密切关注竞争对手
选择你的位置
输入您在其中开展业务或希望获得流量的所有国家或城市。我们建议您至少添加3个位置。
选择引擎
谷歌
谷歌移动
选择引擎
谷歌
谷歌移动
添加关键字
选择要在选定搜索引擎中跟踪的关键字。在国家级跟踪，或在地方级添加要跟踪的位置。添加标签以按主题对关键字进行分组。
设置爬网限制
我们每周对您的站点进行爬网，以发现可能影响您SEO性能的技术站点问题。选择要在此网站上爬网的页面数。
5,000
10,000
20,000
30,000
40,000
50,000
75,000
100,000
250,000
450,000
整个网站
排除子域
跟踪站点地图
基准与竞争对手
我们将跟踪这些网站的竞争链接和关键字指标。
接近
提交
下一个
<script>
new Vue({
el: "#page",
delimiters: ['[[', ']]'],
data (){
return {
rules: {
project_url: {
pattern: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/,
string: ''
},
project_name: {
pattern: /^(?!\s*$).+/,
string: ''
}
},
current_step: 1,
max_step: 1
}
},
methods:{
is_valid(rules){
$.each(rules, function(index, value){
if (value.string.match(value.pattern)) {
$('#' + index).removeClass('is-invalid')
$('#' + index).addClass('is-valid')
nextStep = true
} else {
$('#' + index).removeClass('is-valid')
$('#' + index).addClass('is-invalid')
nextStep = false
}
})
return nextStep
},
validate(){
if(this.current_step === 1){
if(this.is_valid(this.rules))
return true
}
if(this.current_step === 2)
return true
if(this.current_step === 3)
return true
if(this.current_step === 4)
return true
if(this.current_step === 5)
return true
},
goToStep(value){
if(!this.validate())
return
this.current_step = value
},
submitForm(){
alert("submit")
},
advanceStep(){
if(!this.validate())
return
if(this.max_step === 5)
return this.submitForm()
this.current_step++
if(this.max_step < this.current_step)
this.max_step = this.current_step
}
}
})
</script>
新Vue({
el:“第页”，
分隔符：['['，']]']，
数据（）{
返回{
规则：{
项目url:{
模式：/^（？：http（s）？：\/\/）？[\w.-]+（？：\.[\w.-]+）+[\w\-\_~