Jquery

最新推荐文章于 2024-02-28 14:47:58 发布

狮子悬山

最新推荐文章于 2024-02-28 14:47:58 发布

阅读量277

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_27752831/article/details/51602507

本文介绍了一个使用jQuery实现的表单验证示例，通过正则表达式检查输入字段如电子邮件和密码是否符合预设格式，并实时给出反馈。当输入不符合规定格式时，会在输入框下方显示错误消息；若符合格式，则显示成功图标。

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

javascript代码部分:

script src="js/jquery-2.2.4.js"></script>
<script>
$(function(){
$("dd .login_content_input").blur(function(){

var reg = new RegExp($(this).attr("reg"));

var msg =$(this).attr("errMsg");
var inputvalue =$(this).val().trim();
$(this).parent("dd").next("dd").remove();
if(reg.test(inputvalue))
{
if($(this).parent("dd").next("dd").length==0)
{
$(this).parent().next("dd").after("<dd><img src=\"images/register_write_ok.gif\"></dd>");
}
}
else
{

$(this).parent("dd").after("<dd>"+msg+"</dd>");

}

})

})

</script>

html代码部分:

<form id="loginForm" name="loginForm" method="post">
<dl class="login_content">
<dt>Email地址或昵称：</dt>
<dd><input id="email" type="text" reg="^\w+@\w+\.((cn)|(com)|(com\.cn))$" errMsg="邮箱账户不正确" class="login_content_input"/></dd>
</dl>
<dl class="login_content">
<dt>密码：</dt>
<dd><input id="pwd" type="password" reg="^\d{6,8}$" errMsg="密码格式不对" class="login_content_input"/></dd>
</dl>
<dl class="login_content">
<dt></dt>
<dd><input id="btn" value=" " type="submit" class="login_btn_out"/></dd>
</dl>
</form>