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'> *<\/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"> </td></tr>
<tr><td colspan="2"><a href="signup.php">Sign up</td></tr>
</table>
</form>
基本这样就可以了，不过jquery代码还有可以精简的地方，这个有待后期接着研究。
最新文章
- python leetcode 1
- 开发环境(Atom + NotePad++)
- duilib的caption上的Edit无法激活
- 轻松自动化---selenium-webdriver(python) (二)
- Elastislide - 响应式的图片循环展示效果
- 1018LINUX中crontab的用法
- Express 4 中如何使用connect-mongo
- Netty关闭客户端
- zabbix自定义键值原理
- Robotium -- AndroidUI优化工具HierarchyViewer
- GO的数组及切片
- Love Hotels and Unicode[转]
- UVa 657 掷骰子
- 转载–移动互联网终端的touch事件,touchstart, touchend, touchmove
- 干货分享：MySQL之化险为夷的【钻石】抢购风暴【转载】
- jQuery的each函数
- Cassandra User 问题汇总(1)------------repair
- EF实现增删改查
- 关于话题模型（topic model）的一些思考
- 电商网站jQuery放大镜代码