jquery判断邮箱及密码是否输入正确的表单提交

        jquery我接触的也不是很多，基本就是照着案例然后查相关方法做出来的，基本用了大概半天的时间，手打加查资料实现。具体如下，首先下载一个jquery包，网址是https://jquery.com/download/ 我下载的是第一个Download the compressed, production jQuery 3.2.1 压缩版的3.2.1，第二部引入验证页面，代码<script src="plugins/js/jquery-3.2.1.min.js" type="text/javascript"></script> 路径根据自己放的位置修改，接下来是写入验证代码，写的时候注意语句结构及单词的正确性，否则容易出现不必要的错误，出错后认真调试即可。

<script type="text/javascript">
$(function()
{
$("form :input.required").each(function()
{
var $required = $("<strong class='high'>&nbsp;&nbsp;*<\/strong>");
$(this).parent().append($required);
});
$('form :input').blur(function()
{
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//验证密码
if( $(this).is("#password"))
{
if( this.value=="" || this.value.length< 6)
{
var errorMsg ="请输入至少6位密码";
$parent.append('<span class="formtips onError" >'+errorMsg+'<\/span>');
}else{
var okMsg = '输入正确！';
$parent.append('<span class="formtips onSuccess">'+okMsg+"<\/span>");
}
}
if( $(this).is("#email"))
{
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)))
{
var errorMsg = '请输入正确的E_MAIL地址.';

$parent.append('<span class="formtips onError">'+errorMsg+'<\/span>');
}else{
var okMsg = '输入正确！';
$parent.append('<span class="formtips onSuccess">'+okMsg+'<\/span>');
}
}


});
$('#send').click(function()
{
$("form :input.required").trigger('blur');
var numError = $('form .onError').length;
if(numError)
{
return false;
}
return true;
});
//$('#res').click(function()
// {
// $(".formtips").romove;
// })
})
</script>

form内容是这样的

<form id='login' action='login.php' method='post' accept-charset='UTF-8' name="myfrom">
<h1>Sign in</h1><hr/>
<table style="width:80%;">
<tr><td width="24%">Email</td><td width="76%"><input type="text" name="email" id="email" style="width:200px;" class="required"/></td></tr>
<tr><td>Password</td><td><input type="password" name="password" style="width:200px;" id="password" class="required" /></td></tr>
<tr><td>Remember Me</td><td><input type="checkbox" name="remember" id="password:" /></td></tr>
<tr><td><a href="forgetpassword.php">Forgot your Password?</a></td><td><input type="submit" value="Sign In" name="submit" style="width:150px;" id="send" /></td></tr>
<tr><td colspan="2">&nbsp;</td></tr>
<tr><td colspan="2"><a href="signup.php">Sign up</td></tr>
</table>
</form>

基本这样就可以了，不过jquery代码还有可以精简的地方，这个有待后期接着研究。

转载于:https://www.cnblogs.com/xinyu2017/p/7374381.html