jQuery实现表单验证技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/ouersl/article/details/103947499

本文介绍了如何使用jQuery进行前端表单验证。首先讲解了引入jQuery库的必要性，然后详细阐述了如何获取用户名和密码输入框的内容，并利用正则表达式在用户失去焦点时进行合法性检查。合法则提示可用，否则显示错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端样式

<legend>表单校验</legend>
姓名: <input type="text" name="unae" value="" id="unae">
<span class="msg" id="user_msg">*</span>
<img src="#" alt=""> <br/>
密码: <input type="password" name="pwd" value="" id="password">
<span class="msg" id="pwd_msg">*</span>  <br/>
手机: <input type="text" name="phone" value="" id="phone">
<span class="msg" id="pho_msg">*</span>  <br/>
邮箱: <input type="text" name="email" value="" id="email">
<span class="msg" id="email_msg">*</span>  <br/>
<input type="submit" name="" value="提交" id="tijiao" >

使用jquery需要导进一个依赖

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

先获取用户名输入框中的内容，定义一个正则用来校验用户名（blur意思是失去焦点）

$('#name').blur(functions(){
	var name = $('name').val()
	var test_name = /^[a-zA-Z0-9_-]{4,12}$/;
	...
}

可以通过正则中的test方法校验用户名是否合法,如果合法提示可用，否则提示不可用

if (test_name.test(name)==false || name==''){
            $('#user_msg').html('用户名必须4-12位').css('color','red')
}else{
            $('#user_msg').html('用户名可用').css('color','green')
        } });

获取密码输入框中的数据对这个值进行校验

$('#password').blur(function(){
	var pwd = $('#password').val();
	if(pwd=''||pwd.length>12||pwd.length<6){

     $('#pwd_msg').html('密码长度在6-12位之间').css('color','red')
}else{
        $('#pwd_msg').html('密码可用').css('color','green')
    }
  }
}

<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
    <style type="text/css" media="screen">
        .msg{color:red;}
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<legend>表单校验</legend>
姓名: <input type="text" name="unae" value="" id="unae">
<span class="msg" id="user_msg">*</span>
<img src="#" alt=""> <br/>
密码: <input type="password" name="pwd" value="" id="password">
<span class="msg" id="pwd_msg">*</span>  <br/>
手机: <input type="text" name="phone" value="" id="phone">
<span class="msg" id="pho_msg">*</span>  <br/>
邮箱: <input type="text" name="email" value="" id="email">
<span class="msg" id="email_msg">*</span>  <br/>
<input type="submit" name="" value="提交" id="tijiao" >

<script type="text/javascript">
    $('#unae').blur(function () {
        var name = $('#unae').val();
        var test_name = /^[a-zA-Z0-9_-]{4,12}$/;
        if (test_name.test(name)==false || name==''){
            $('#user_msg').html('用户名必须4-12位').css('color','red')
        }else{
            $('#user_msg').html('用户名可用').css('color','green')
        } });
    $('#password').blur(function () {
        var pwd = $('#password').val();
        if(pwd=''||pwd.length>12||pwd.length<6){

            $('#pwd_msg').html('密码长度在6-12位之间').css('color','red')
        }else{
            $('#pwd_msg').html('密码可用').css('color','green')
    }
    });
    $('#phone').blur(function () {
        var phone = $('#phone').val();
        var mPattern = /^1[34578]\d{9}$/;
        if (mPattern.test(phone)){
            $('#pho_msg').html('手机号可用').css('color','green')
        }else{
            $('#pho_msg').html('手机格式不正确').css('color','red')
        }
    });
    $('#email').blur(function () {
        var email = $('#email').val();
        var ePatter = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        if (ePatter.test(email)){
            $('#email_msg').html('邮箱可用').css('color','green')
        }else{
            $('#email_msg').html('邮箱格式不正确').css('color','red')
        }
    })

</script>
</body>
</html>

jQuery之表单验证