Question

我有一个validation.js文件，用于检查字段是否有效

exports.user = {
    username: function(input) {
        if (!input)
            return 'username is required'
        var min = 3
        var max = 10
        if (input.length < min)
            return 'username min of length is ' + min
        if (input.length > max)
            return 'username max of length is ' + max
        return null
    },
    password: function(input) {
        if (!input)
            return 'password is required'
        var min = 3
        var max = 10
        if (input.length < min)
            return 'password min of length is ' + min
        if (input.length > max)
            return 'password max of length is ' + max
        return null
    }

}

这是我的签到表格（我只是显示用户名字段）

<div ng-if="showSignin" class="my-tab-pane">
    <form name="signin_form" action="{{signinServerUrl}}" method="POST">
        <div class="my-form-group">
            <label for="signin_username">Username:</label>
            <input ng-model="username" type="text" name="username" id="signin_username" placeholder="Enter Username" class="my-form-control" required username>

            <div ng-show="signin_form.$submitted || signin_form.username.$touched">
                <div ng-show="signin_form.username.$error.required">Tell us your username. </div>
            </div>
        </div>
    </form>
</div>

这是我的自定义验证：

var app = angular.module('custom_validation');
var helper = require('../helper.js')

app.directive('username', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$validators.username = function(modelValue, viewValue) {
                if (ctrl.$isEmpty(modelValue)) {
                    return false; //required
                }

                var msg = helper.validation.username(username)
                if (msg)
                    return false
                return true
            };
        }
    };
});

请注意，我的validation.js文件也处理required，所以我只想使用我的custom_validation。但它只能返回true false值。我如何传递错误信息？

我可能会使用ng-message之类的

<div ng-message="required">You did not enter a field</div>

但错误消息仍未来自validation.js

我想封装验证的原因是，

例如，UI实现者不应该担心字段是否为required。它应该像检查输入和获取错误消息一样简单。

此外，该文件在我的服务器代码中重用，例如（服务器mongodb代码）

UserSchema.pre('save', true, function(next, done) {
    var self = this //in case inside a callback
    var msg = helper.validation.user.username(self.username)
    if (msg) {
        self.invalidate('username', msg)
        done(helper.getValidationError(msg))
    }
    else
        done()
    next()
})

Answer 1

这是javsacript，您可以在$error

中创建自定义字段

var msg = helper.validation.username(username)
ctrl.$error.usernameMessage = msg;
if (msg)
    return false
return true

稍后在UI

中使用它

<div ng-show="signin_form.username.$error.username">
     {{signin_form.username.$error.usernameMessage}}
</div>

请注意，我更改了ng-show中的字段以匹配您的新验证器
工作plunker

修改
在指令中要求ngModel可以访问应用指令的ng-model input控制器（链接函数的ctrl参数）。实际上它与$scope.signin_form.username（此处username代表ngModel范围内的MainCtrl的变量）相同，因此您可以以任意方式访问它。由于username指令不会隔离其范围，因此链接函数scope.signin_form内部由于原型继承而允许访问MainCtrl的{{1}}中的表单。但是使用这种表示法，你不得不对指令中的表单和字段的名称进行硬编码。因此，通过$scope访问是正确的，因为表单中可能有多个字段，其中应用了ng-model指令。但是，在模板中，您只能通过username的{{1}}访问该表单，因此我们使用$scope

角度表单验证如何从代码中显示错误消息

1 个答案: