<div class="login" v-show="activeTab === 1"> <div class="panel-content"> <div class="login-account-input panel-input"> <el-input v-model="loginData.account" placeholder="手机号/账号/平台号" clearable v-validate="'required'" data-vv-scope="login" name="account" data-vv-as="手机号/账号/平台号" ></el-input> </div> <div class="login-pwd-input panel-input"> <el-input v-model="loginData.pwd" placeholder="请输入登录密码" clearable v-validate="'required'" data-vv-scope="login" name="pwd" data-vv-as="密码" ></el-input> </div> </div> <div class="panel-errors"> <span v-if="errors.has('login.account')">{{errors.first('login.account')}}</span> <span v-else-if="errors.has('login.pwd')">{{errors.first('login.pwd')}}</span> <span v-else-if="otherError">{{otherError}}</span> </div> <div class="panel-btns"> <el-button class="default-btn" @click="loginDialogVisible = false">取消</el-button> <el-button class="default-btn" type="main" @click="login">登录</el-button> </div> </div> <div class="register-panel" v-show="activeTab === 2"> <div class="panel-content"> <div class="register-mobile-input panel-input"> <el-input v-model="registerData.mobile" placeholder="请输入手机号" clearable v-validate="'required'" data-vv-scope="register" name="mobile" data-vv-as="手机号" ></el-input> </div> <div class="register-code-input panel-input"> <el-input v-model="registerData.verCode" placeholder="请输入验证码" clearable v-validate="'required'" data-vv-scope="register" name="code" data-vv-as="验证码" ></el-input> </div> <div class="register-pwd-input panel-input"> <el-input v-model="registerData.pwd" placeholder="请输入密码(6-18位数字与字母组合)" clearable v-validate="'required'" data-vv-scope="register" name="pwd" data-vv-as="密码" ></el-input> </div> </div> <div class="panel-errors"> <span v-if="errors.has('register.mobile')">{{errors.first('register.mobile')}}</span> <span v-else-if="errors.has('register.code')">{{errors.first('register.code')}}</span> <span v-else-if="errors.has('register.pwd')">{{errors.first('register.pwd')}}</span> <span v-else-if="otherError">{{otherError}}</span> </div> <div class="panel-btns"> <el-button class="default-btn" @click="loginDialogVisible = false">取消</el-button> <el-button class="default-btn" @click="register" type="main">提交</el-button> </div> </div> methods: { tabHandler(index) { this.activeTab = index }, login() { this.$validator.validateAll('login').then(res => { console.log(res) }) }, register() { this.$validator.validateAll('register').then(res => { console.log(res) }) }, initLoginDialog() { this.loginData = { account: '', pwd: '' } this.registerData = { mobile: '', verCode: '', pwd: '' } setTimeout(() => { this.errors.clear('login') this.errors.clear('register') }, this.$resetMillisecond) this.otherError = '' } }, watch: { loginDialogVisible(val) { val && this.initLoginDialog() }
// 校验所有字段.
validator.validate();
// 验证要匹配的字段.
validator.validate('field');
// 校验某个范围下的字段
validator.validate('scope.field');
// 校验某个范围下的所有字段.
validator.validate('scope.*');
// 校验未配置范围的字段.
validator.validate('*');
参考:
data-vv-scope 说明
https://baianat.github.io/vee-validate/api/data-attrs.html
Validate API 说明
https://baianat.github.io/vee-validate/api/validator.html#api
使用入门
https://blog.csdn.net/qq_14988399/article/details/80678317
https://blog.csdn.net/beyond__devil/article/details/84956810