Vue.js 表单
Vue.js表单
Vue.js是一个流行的JavaScript框架，它可以轻松地构建网页应用程序。其中，Vue.js的表单组件可以让您更轻松地创建和验证表单。
表单元素
常见的表单元素有输入框、文本域、下拉选择框、单选框和复选框。这些元素可以使用Vue.js中的v-model指令进行绑定，在代码中定义对应的变量即可。
<template>
<form>
<label>用户名:</label>
<input type="text" v-model="username"><br>
<label>密码:</label>
<input type="password" v-model="password"><br>
<label>确认密码:</label>
<input type="password" v-model="confirmpassword"><br>
<label>性别:</label>
<input type="radio" v-model="gender" value="male">男
<input type="radio" v-model="gender" value="female">女<br>
<label>城市:</label>
<select v-model="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select><br>
<label>爱好:</label>
<input type="checkbox" v-model="hobbies" value="reading">阅读
<input type="checkbox" v-model="hobbies" value="music">音乐
<input type="checkbox" v-model="hobbies" value="travel">旅行<br>
<label>自我介绍:</label>
<textarea v-model="description"></textarea>
</form>
</template>
表单验证
表单验证是使用Vue.js中的v-validate指令。v-validate指令需要与vee-validate插件一起使用。vee-validate是一个基于Vue.js的轻量级插件，用于快速和容易地进行表单验证。
在template内，v-validate与表单元素绑定。在data定义数据，使用rules进行验证。一个数据对应一个数组，该数组包含多个验证规则。Vue.js暴露了大量的内置规则，也可以定制规则。
<template>
<div>
<form>
<label>用户名:</label>
<input type="text" v-model="username" v-validate data-vv-rules="required"><br>
<span v-if="errors.has('username')">{{errors.first('username')}}</span>
<label>密码:</label>
<input type="password" v-model="password" v-validate data-vv-rules="required,min:6"><br>
<span v-if="errors.has('password')">{{errors.first('password')}}</span>
<label>确认密码:</label>
<input type="password" v-model="confirmpassword" v-validate data-vv-rules="required,confirmed:password"><br>
<span v-if="errors.has('confirmpassword')">{{errors.first('confirmpassword')}}</span>
<label>邮箱:</label>
<input type="email" v-model="email" v-validate data-vv-rules="required,email"><br>
<span v-if="errors.has('email')">{{errors.first('email')}}</span>
<label>手机号:</label>
<input type="tel" v-model="phone" v-validate data-vv-rules="required,tel"><br>
<span v-if="errors.has('phone')">{{errors.first('phone')}}</span>
<button type="submit" @click.prevent="submitForm">提交</button>
</form>
</div>
</template>
<script>
import { ValidationProvider, extend } from 'vee-validate';
import { required, email, min, confirmed, tel } from 'vee-validate/dist/rules';
export default {
components: {
ValidationProvider,
},
data() {
return {
username: '',
password: '',
confirmpassword: '',
email: '',
phone: '',
};
},
methods: {
submitForm() {
if (!this.errors.any()) {
alert('提交成功！');
}
},
},
mounted() {
extend('tel', tel);
extend('required', required);
extend('email', email);
extend('min', min);
extend('confirmed', confirmed);
},
};
</script>
总结
在Vue.js应用程序中，表单验证是非常重要的。Vue.js既支持双向绑定，也支持表单验证，能够很好地实现应用程序的界面逻辑。