自己写jquery表单验证

jquery的表单验证插件数不胜数，有时想想其实有的项目不需要引入一些插件，要有自己动手的好习惯，下面是一个简单的表单验证。

一、html代码

                <form name="j-form" id="j-form" method="POST"><h3>用户登录</h3><div class="input-item"><i class="fa fa-user fa-fw"></i><input type="text" name="username" id="Uname" placeholder="请输入用户名" maxlength="20"><span id="fU" style="display: none;">请输入用户名！</span></div><div class="input-item"><i class="fa fa-key fa-fw"></i><input type="password" name="userpwd" id="Upwd" placeholder="请输入密码" maxlength="16"><span id="fP" style="display: none;">请输入密码！</span></div><div class="radio-item clearfix"><span class="radio-con fl"><input class="magic-radio" type="radio" value="1" name="user-r" id="radion-u" checked><label for="radion-u">记住用户</label></span><span class="radio-con fr"><input class="magic-radio" type="radio" value="2" name="user-r" id="radio-p"><label for="radio-p">记住密码</label></span></div><div class="login-btn"><input type="submit" id="btn-login" value="登    录"></div></form>

二、js代码

<script>$(document).ready(function(){$("#btn-login").on("click",function(e){e=event || window.event;e.preventDefault();var userName=$("#Uname").val().trim();var userPwd=$("#Upwd").val().trim();var sta=(userName=="" && userPwd=="") && 1 || userName=="" && 2 || userPwd=="" && 3 || 4;switch (sta){case 1:$("#fU").css("display","block");$("#fP").css("display","block");/*alert("请输入用户名与密码");*/break;case 2:$("#fU").css("display","block");$("#fP").css("display","none");/*   alert("请输入用户名");*/break;case 3:$("#fP").css("display","block");$("#fU").css("display","none");/*   alert("请输入密码");*/break;case 4:$("#fU").css("display","none");$("#fP").css("display","none");$.ajax({type:"post",url:"",dataType:"json",data:{"username":userName,"userpwd":userPwd},success:function(msg){window.location.href="";},error:function(){alert("登录失败！");}})$("#j-form").submit();//提交表单}})})
</script>

三、效果图

自己写jquery表单验证相关推荐

jQuery 表单验证设置html(,jquery表单验证
如何用jquery进行表单验证 (1)所需工具: jQuery.1.8.3.js和jquery.validate.js,百度jquery validate插件即可找到下载 (2)引入js (3)按照插 ...
一款比较实用齐全的jQuery 表单验证插件
一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网 ...
jQuery 表单验证插件，jQuery Validation Engine用法详解
jQuery 表单验证插件,jQuery Validation Engine用法详解功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
12个方便易用的jquery表单验证插件
绝大部分网站都是开放注册的,而注册就需要使用表单验证,因为网站都需要对注册用户的信息安全性和合理性做出判断,表单的注册都应该具备完善的验证方式,比如注册使用的手机号是否是真实的?用户填写的验证码是否正 ...
jquery表单验证小结
jquery表单验证小结下面将讲述的是一个完整的jquery表单验证实例,该实例覆盖了jquery验证的大部分知识点,比如验证框架,messages的扩展和自定义方法的定义以及在验证中的应用等,接下 ...
jQuery 表单验证插件jQuery Validation Engine用法详解
功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. jQuery Validation ...
轻量级的jQuery表单验证插件 - HAPPY.js
为什么80%的码农都做不了架构师?>>> 日期:2012-9-14 来源:GBin1.com 在线演示本地下载功能强大的表单验证插件很多,以前我们介绍过validati ...
JQuery 表单验证--jquery validation
jquery validation,表单验证控件官方地址 :http://jqueryvalidation.org/ jquery表单验证默认值校验规则 jquery表单验证默认的提示 1 &l ...
php表单确认密码,jQuery表单验证之密码确认实例详解
本文主要为大家详细介绍了jQuery表单验证之密码确认的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 众所周知,在修改密码时会需要两次输入密码.这时如何确保两个密码框 ...

自己写jquery表单验证

自己写jquery表单验证相关推荐

最新文章

热门文章