如何优化表单验证

angular.module(‘com.ngnice.app‘).directive(‘bfFieldError‘, function bfFieldError($compile) {
    return {
        //限制为只能通过属性(Attribute)的形式使用,
        restrict: ‘EA‘,
        //这个元素上必须有一个ng-model属性,如果没有,就会报错
        require: ‘ngModel‘,
        //link函数会在当前指令初始化的时候被自动执行
        link: function(scope, element, attrs, ngModel) {
            var subScope = scope.$new(true);
            subScope.hasError = function() {
                return ngModel.$invalid && ngModel.$dirty;
            };
            subScope.errors = function() {
                return ngModel.$error;
            };
            //把一段HTML编译成“活DOM(Live DOM)”,然后把subScope传给它,这个Live DOM将会跟随subScope的变化自动更新自己
            var hint = $compile(‘<ul ng-if="hasError()"><li ng-repeat="(name, wrong) in errors()">{{name|error}</li></ul>‘)(subScope);
            //把这段Live DOM追加到当前元素后面,好让它显示出来
            element.after(hint);
        }
    };
});
angular.module(‘com.ngnice.app‘).constant(‘Errors‘, {
    email: ‘不是有效格式的邮件地址‘,
    required: ‘此项不能为空‘
});
angular.module(‘com.ngnice.app‘).filter(‘error‘, function (Errors) {
    return function (name) {
        return Errors[name] || name;
    }
});
时间: 2024-11-05 10:56:31

如何优化表单验证的相关文章

15 款优化表单的 jQuery 插件

网页上的表单提供给用户的一种交互的方式,用户输入数据,提交到服务器,等待后续的处理.这些表单在我们浏览的网页中随处可见,也容易被我们忽略. 比如,"联系我们"页面会提供一个表单给用户填写他们的信息和想提的建议或者问题,但是开发者往往只关注网站的设计和用户交互的内容,并不会注意到用户进 行交互的方式--表单. 以下整理的这个列表就是为 Web开发者准备的,包括了 15 款优化表单的 jQuery 插件.希望大家能从中找到适合自己的 jQuery 插件,优化网页表单,更好的与用户进行交互.

angular表单验证实例----可用的代码

前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ng-app     启动你angular的模块 ng-controller 控制器,启动你angualr里面的逻辑代码作用在页面上 ng-options  循环你select里面的option标签,很好用的 ng-submit,表单提交执行的 novalidate  表单form配合后期检测的

表单验证续&lt;AngularJs&gt;

前一篇文章说过,ng1.3+以后对于表单验证有了优化,它不再需要一个详细的表达式状态创建元素显示或隐藏. 例如:我们在ng1.3之前的版本都需要如下写法: <div class="error" ng-show="signup_form.name.$dirty && signup_form.name. $invalid && signup_form.submitted"> ng1.3之后新增了一个ngMessages指令,他

jQuery Validation Engine 表单验证

功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. 兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+ 版本: jQuery v1.7+ jQuery Validation Engine v2.6.2 相对 2.2.4 版本的一些区别: 部分参数功能发生变化: 输入控件可以不写 id 属性: 参数 onSuccess 和 onFailure 改为

看用Tornado如何自定义实现表单验证

我们知道,平时在登陆某个网站或软件时,网站对于你输入的内容是有要求的,并且会对你输入的错误内容有提示,对于Django这种大而全的web框架,是提供了form表单验证功能,但是对于Tornado而言,就没有这功能,所以就需要我们来自己自定义form表单验证,而且这种方法正是Django里的form表单验证的实质内容,也帮我们在后面学习Django理解相关的源码. 写之前,我们必须知道form表单验证的实质是什么? 实质就是正则匹配 我们知道用户提交数据是通过post方式提交,所以我们重写post

HTML5实战应用:如何让表单验证更友好

HTML5表单验证给前端人员带来了便利,但是在用户体验上存在一些缺陷,默认的提示对用户很不友好,无法准确的获取想要的信息.好在大牛们在接口设计的时候提供了setCustomValidilty方法可以自定义提示信息.这是一个好消息,但也存在一些弊端,需要让开人员做额外的一些处理才达到真正想要的目的. 接下来通过以下示例来阐述方法的应用. 未调用setCustomValidity)方法!DOCTYPE html> html hea ata charset="utf-8 titleform te

python :表单验证--对每一个输入框进行验证

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"/> <title>Title</title> <style> .error{ color

jquery插件,表单验证validation plugin的使用

笔记: 一.首先引入插件 <script type="text/javascript" src="js/jquery-1.10.0.js" ></script> <script type="text/javascript" src="js/jquery.validate-1.13.1.js" ></script> 列子:一个简单的登录表单验证 1 <form id=&quo

AngularJs 表单验证

看到一些博客说这个框架要过时了,但是还是学习了下,觉的很方便的一个框架,有空的同学可以看看,适合我们入门看,比较基础. 对于日常的开发来说,最常见的开发场景就是通过表单编辑数据,这里涉及的问题就是验证问题. angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验证. 1. 绑定 为了方便,我们在 $scope 上下文对象上创建一个 model 来表示我们编辑的内容. $scope.model = { id : 8, name: "alice", email: "