Vue-vue.js表单校验
2019-04-25 10:29
59 查看
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <style> .error{color:red;font-size: x-small} .success{color:green;font-size: x-small} </style> </head> <body> <div id="app"> 用户名:<input type="text" placeholder="不少于 6 个字符" v-model="uname" @keyup="validText"> <span :class="errorClass">{{errorText}}</span> </div> </body> <script> var app = new Vue({ el: '#app', data: { uname:'', errorClass:{ error:false, success:false }, errorText:'' }, methods:{ validText: function () { //用户名长度小于 6,验证失败 if(this.uname.length<6){ this.errorClass.error = true; this.errorClass.success = false; this.errorText = '*校验失败!'; }else{ this.errorClass.error = false; this.errorClass.success = true; this.errorText = '*校验成功!'; } } } }); </script> </html>
相关文章推荐
- Vue.js 表单校验插件
- Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
- 10-1 JS案例:表单校验
- Vue.js实现双向数据绑定(表单自动赋值、表单自动取值)
- Vue.js 学习(8) -- v-model: 表单控件绑定
- JavaEE day03 使用JS完成简单的数据校验、完成图片轮播效果、完成页面定时弹出广告、完成表单校验
- Vue.js 表单控件
- 使用JS完成注册页面表单简单校验
- vue.js框架之表单排序&分页
- 使用Js完成注册页面表单校验
- 详解vue如何使用rules对表单字段进行校验
- Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
- JavaScript学习——使用JS完成注册页面表单校验
- 常用的js方法,包括表单校验的一些方法,下拉菜单常用的方法等等
- Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
- js中常用表单数据校验方法
- 06、vue.js 之表单控件绑定
- js表单校验代码(供参考)
- jquery.form.js+jquery.validation.js实现表单校验和提交
- vue 使用自定义指令实现表单校验的方法