Ajax方式校验前台注册表单

Ajax方式校验前台注册表单

1、需求分析

• 需求：实现表单的不刷新校验。
  

• 分析：通过Ajax的方式，获取表单，再进行正则表达式的判断。

• 代码实现：将用户名的校验作为模板，其它实现只需复制，然后填空修改即可。

2、代码实现模板

• 用户名实现校验，模板代码：

// 函数名前，要加上function关键字
function checkUsername() {  
    //1.获取用户输入的用户名， 注意是.var(), 而不是value()    
    var username = $("#username").val();
    //2.定义用户名的正则表达式
    var reg_username = /^\w{8,20}$/;  //长度为 8-20 的字母
    //正则校验比较
    var flag = reg_username.test(username);
    //3.根据结果做判断，响应不同操作
    if (flag) {
        //输入框不变红，css里的“”里面不能有内容
        $("#username").css("border", "");  
        return true;
    } else {
        //输入框颜色变红
        $("#username").css("border", "1px solid red");
        return false;
    }
}


//校验函数执行的时机
$(function () {
    //1.输入框失去焦点时，进行校验
    $("#username").blur(checkUsername);
    //2.表单提交时，进行校验
    $("#registerForm").submit(function () {
        if (checkUsername()) {
        	//校验通过，发送数据    
        } else {  
            //校验不通过，不发送数据
        }
    });
});

3、逻辑实现模板

• 用户名实现校验，逻辑模板

1.校验函数

• 获取输入值
• 定义正则表单式，检验输入值
• 处理不同的校验结果

2.执行时机

• 输入框失去焦点时校验
• 点击表单提交按钮时校验