参考文章:https://qtdebug.com/fe-semantic-ui-validation/

实现注册功能,在注册的时候要填用户名,为了提升用户体验感,要在输入的时候就能确定这个用户名或手机号是否能用,首先要添加自定义的验证规则,就是利用Ajax将当前输入框的值请求后台,检查用户名或手机号是否已被注册,

var $enrollInfo = $('.ui.form');
    $.fn.form.settings.rules.checkInfo = function () {
        var valid = false;
        var username = {};
        username.key = $(this).attr("name");
        username.value = $(this).val();
        syncAjaxData("POST", "/enrollCheck", JSON.stringify(username), function usernameIsExists(result) {
            console.log(username.value);
            valid = !result.userIsExist;
        });
        return valid;
    };

这里Ajax是封装了一下的,Ajax请求要是同步请求,将async设为false,async: false,如果验证没通过则返回false,我这里后台服务是如果用户存在则返回true,所以加了个!逻辑,
完整调用代码如下,html代码省略,参考官方文档就行了,

$(document).ready(function () {
    var $enrollInfo = $('.ui.form');
    $.fn.form.settings.rules.checkInfo = function () {
        var valid = false;
        var username = {};
        username.key = $(this).attr("name");
        username.value = $(this).val();
        syncAjaxData("POST", "/enrollCheck", JSON.stringify(username), function usernameIsExists(result) {
            console.log(username.value);
            valid = !result.userIsExist;
        });
        return valid;
    }

    $enrollInfo.form({
        inline: true,
        revalidate: true,
        transition: 'slide down',
        on: 'blur',
        fields: {
            username: {
                identifier: 'username',
                rules: [
                    {
                        type: 'empty',
                        prompt: '请输入用户名'
                    },
                    {
                        type: 'checkInfo',
                        prompt: '此用户名已经被注册了,换个名字吧!'
                    }
                ]
            },
            telPhone: {
                identifier: 'telPhone',
                rules: [
                    {
                        type: 'regExp[^[1][3,4,5,7,8][0-9]{9}$]',
                        prompt: '请输入正确手机号'
                    },
                    {
                        type: 'different[username]',
                        prompt: '用户名和手机号不能相同'
                    },
                    {
                        type: 'checkInfo',
                        prompt: '此手机号已经注册了,试试去登录?'
                    }
                ]
            }
        }
    });
});