前端如何做好诸如登录注册等输入的合法验证

Question

我的想法是：
1. 给每一个表单输入框关联一个布尔类型变量(用于表示此输入是否合法，初始值为false)，并添加一个blur事件，事件函数里用正则等方法验证，不符合则使相应提示文本显示，并将布尔值设为false，符合布尔值为true。
2. 然后再给form提交添加submit事件，验证每一个框的布尔值，全为true则成功，否则给一个泛泛的提示（你的输入有错误，请检查更改后重新提交！！！）
请教大家，这样的设计合理么？通常都是怎么做的？

Answer 1

基于用户体验来说，不适合等到submit的时候再给出提示。假如你的表单有很多个输入，用户好不容易输入完成，你再告诉他输入有误，且泛泛的提示的还不能让其知晓错在哪里
给出下列思路：
- 单个输入先触发focus，提示用户正确的输入
- 单个输入完成后触发blur，及时验证用户数据输入的合法性，非法则给出提示，并引导用户修改
- 一步步验证，最后提交

Answer 2

通常的思路都是使用Jquery Validate

相关手册

使用详细解析

Answer 3

同意楼上，
补充一点，对于用户名，邮箱这类唯一的信息，除了前端的格式判断外
还需要用AJAX异步判断数据库中是否已经存在了

Answer 4

贴个错误类

 var error = {
            "empty" : "未输入",
            "type"  : "输入的格式不正确",
            "name"  : "用户名已经被注册了",
            "phone" : "手机号码已经被注册过了",
            "email" : "邮箱已经被注册了",
            "same"  : "两次输入的密码不一致",
            "sex"   : "还没有选择性别",
            "agree" : "未同意我们的用户的协议",
            "what"  : "未知的错误,请联系管理员",
            "less"  : "密码至少6位",
            "code"  : "验证码错误",
            "more"  : "用户名最少3位，最多15位"
        };

每个input框都有对应的错误提示，而且在blur时进行判断。可以设置sumbit的disabled值为true，一系列判断符合要求后再设为false防止提交空form