表单校验代码实现

1962-小同学

发表文章数:94

热门标签

,
首页 » Java » 正文

表单校验
提升用户体验,并减轻服务器压力。
//校验用户名
//单词字符,长度8到20位
function checkUsername() {
//1.获取用户名值
var username = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲username").val(…/;

//3.判断,给出提示信息
var flag = reg_username.test(username);
if(flag){
//用户名合法
$("#username").css(“border”,"");
}else{
//用户名非法,加一个红色边框
$("#username").css(“border”,“1px solid red”);
}

         return flag;
     }
     //校验密码
     function checkPassword() {
         //1.获取密码值
         var password = ("#password").val();
         //2.定义正则
         var reg_password = /^/w{8,20}/;

         //3.判断,给出提示信息
         var flag = reg_password.test(password);
         if(flag){
             //密码合法
             ("#password").css("border","");
         }else{
             //密码非法,加一个红色边框("#password").css("border","1px solid red");
         }

         return flag;
     }
     //校验邮箱

function checkEmail(){
//1.获取邮箱
var email = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲email").val(); …/;

//3.判断
var flag = reg_email.test(email);
if(flag){
$("#email").css(“border”,"");
}else{
$("#email").css(“border”,“1px solid red”);
}

return flag;
}

$(function () {
//当表单提交时,调用所有的校验方法
$("#registerForm").submit(function(){

             return checkUsername() && checkPassword() && checkEmail();
             //如果这个方法没有返回值,或者返回为true,则表单提交,如果返回为false,则表单不提交

});

         //当某一个组件失去焦点是,调用对应的校验方法
    ("#username").blur(checkUsername);("#password").blur(checkPassword);
         $("#email").blur(checkEmail);

     });
标签:

未经允许不得转载:作者:1962-小同学, 转载或复制请以 超链接形式 并注明出处 拜师资源博客
原文地址:《表单校验代码实现》 发布于2021-10-12

分享到:
赞(0) 打赏

评论 抢沙发

评论前必须登录!

  注册



长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu3.3主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录