Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。
& lt; div>
,& lt; h3>你好,请登录& lt;/h3>
,& lt; div>
& lt;才能form id=發oginFrom"比;
,,& lt; div>
,,,& lt; label>邮箱& lt;/label>
,,,& lt; input 类型=皌ext",类=癴orm-control", id=癷nputEmail3",占位符=癊mail", v模型=癊mail"比;
,,,& lt;/div>
,,& lt;/div>
,,& lt; div>
,,,& lt; label>密码& lt;/label>
,,,& lt; input 类型=皃assword",类=癴orm-control", id=癷nputPassword3",占位符=皃assword", v模型=皃assword"比;
,,& lt;/div>
,,& lt; div>
,,,& lt; button 类型=癰utton",类=癰tn btn-default login", v:点击=暗锹?)“在登录& lt;/button>
,,& lt;/div>
,,& lt; div v=癳rrorList.length 祝辞,0“比;
,,,& lt; div 类=癮lert alert-danger",角色=癮lert"在{{errorList.join (& # 39;; & # 39;)}} & lt;/div>
,,& lt;/div>
& lt;才能/form>
,& lt;/div>
& lt;/div>
& lt; script>
var vm =, Vue ({new
,el: & # 39; # loginFrom& # 39;
,数据:{
电子邮件:,才能““,
,,密码:““,
,,errorList: []
},
,方法:{
,,验证:function (), {
,,this.errorList =, []
,,if (this.email ==, & # 39; & # 39;), {
,,,this.errorList.push(& # 39;请输入邮箱& # 39;);
,,},{else
,,,var reg =,/^ ([a-zA-Z] | [0 - 9]) (\ w | \) + @ [a-zA-Z0-9] + \。([a-zA-Z] {2,4}) $/;
,,,if (! reg.test (this.email)), {
,,,,this.errorList.push(& # 39;请输入有效的邮箱& # 39;);
,,,}
,,}
,,if (this.password ==, & # 39; & # 39;), {
,,,this.errorList.push(& # 39;请输入密码& # 39;);
,,},{else
,,,if (& lt; this.password.length 6), {
,,,,this.errorList.push(& # 39;密码长度不得少于6位& # 39;);
,,,}
,,}
,,return this.errorList.length & lt;=, 0;
,,},
登录才能:function (), {
,,if (this.validate ()), {
,,,警报(& # 39;登录成功& # 39;);
,,}
,,}
,}
});
& lt;/script> 为了排除无关内容对大家的影响,写这个例子的时候,博主排除了一切复杂的HTML结构和CSS样式,经过简单润色以后,这个例子的效果展示如下,果然GUI满足了人们颜控的一面,可让这个世界高速运行的是CLI,引导是博主这种“全栈工程师”的最爱之一。这种验证方式简直是人类本能的反应,可这恰好是最糟糕的一个例子,因为这个代码完全没法复用,可以想象得到,如果再继续增加针对密码强度,譬如大小写,数字等等的验证,这个代码会混乱成什么样子,所以,这是最简单的表单验证,同样是最糟糕的表单验证。
<>强基于jQuery的表单验证
其实,如果不是因为老项目依赖jQuery,而新项目在某些地方又需要和老项目保持一致,有谁会喜欢在Vue的世界里使用jQuery呢?因为数据驱动和事件驱动,真的是两种不同的思想,我就见过因为监听不到某个事件而花费一整天时间的人……所以,这里使用jQuery的表单验证插件jQuery验证、目的只有一个,即实现博主对自己的承诺,做一个和老项目一模一样的表单验证。官方这个示例最大的问题是,它的检验逻辑扩展性比较差,后端同学对这个应该有所体会啦,譬如实际业务中常常有邮箱,手机号,非空,数字,正则等等的验证规则,而后端常常采用基于属性的验证或者是FluentValidation这样的库,所以,核心问题是,能不能定义相应的验证规则。接下来,我们通过jQuery的表单验证插件来实现验证。
通常情况下,jQuery验证支持面向控件和面向代码两种验证方式。所谓面向控件,就是指在控件里添加类似<代码> ,<代码>邮件,<代码> 等范围等的扩展属性,jQuery验证内置了十余种标准的验证规则,基本可以满足我们的日常使用。而面向代码,就是通过JavaScript来定义验证规则,这就非常符合Vue数据驱动的风格了,因为在JavaScript里一切皆是对象,而这些对象可以作为Vue中的数据来使用。自然而然地,在第一个示例的基础上,我们可以非常容易地扩展出基于jQuery的表单验证:
