表单验证之错误信息右方提示

说明

图1：简单效果图，
图2、3：当所有文本框都为空或者输入不符合要求时，会在右方提示错误。

效果图

html代码

<body><h2>注册用户：</h2><hr><form action="#" ><p>用户名：</p><p><input type="text" name="username" class="verify uname"> <span class="error">长度不够或用户名已存在！</span></p><p>密码：</p><p><input type="text" name="password" class="verify pw"> <span class="error">密码长度至少6位！</span></p><p>确认密码：</p><p><input type="text" name="repassword" class="verify repw"> <span class="error">长度不够或两次密码不一致！</span></p><p>邮箱：</p><p><input type="text" name="email" class="verify email"> <span class="error">邮箱格式不正确！</span></p><p>手机号：</p><p><input type="text" name="phone" class="verify phone"> <span class="error">手机号格式不正确！</span></p><p><input type="button" value="提交" class="ok" ><input type="reset" value="重置"></p></form>
</body>

css代码

<style>    *{font-family: 微软雅黑;}.error{color: #f00;font-weight: bold;display: none;}</style>

jquery代码

<script>//给每一个都加一个属性$('.verify').data({'s':0});//----------用户名验证---------------$('.uname').blur(function(){val=$.trim(this.value);// alert(val);//此处先简单判断//学完php后可进行数据库操作if(val<3 || val=='zmy'){//如果当前用户已存在，则将提醒显示$(this).next().show();//显示就是错误的，则属性s就为0$(this).data({'s':0});}else{//否则，则将提醒隐藏$(this).next().hide();//不显示就是正确的，则属性s就为1$(this).data({'s':1});}});//-----------密码验证------------------$('.pw').blur(function(){val=this.value;if(val.length<6){$(this).next().show();$(this).data({'s':0});}else{$(this).next().hide();$(this).data({'s':1});}});//--------确认密码-------------------$('.repw').blur(function(){//确认密码的值val=this.value;//密码的值pwval=$('.pw').val();if(val.length<6 || val!=pwval){$(this).next().show();$(this).data({'s':0});}else{$(this).next().hide();$(this).data({'s':1});}});//----------邮箱格式------------------$('.email').blur(function(){val=this.value;if(val.match(/^\w+@\w+\.\w+$/i)){$(this).next().hide();$(this).data({'s':1});}else{$(this).next().show();$(this).data({'s':0});}});//----------手机格式------------------$('.phone').blur(function(){val=this.value;if(val.match(/^1[3456789]\d{9}$/)){$(this).next().hide();$(this).data({'s':1});}else{$(this).next().show();$(this).data({'s':0});}});//---------表单验证--------------------$('.ok').click(function(){//触发移开事件$('.verify').blur();//遍历收集每个人身上的s属性值值//将获取到的值进行相加，若值不等于5则不可以提交tot=0;$('.verify').each(function(){tot+=$(this).data('s');});//if(tot==5){$('form').submit();}});
</script>

欢迎大家批评指正

web前端之表单验证（一）相关推荐

前端jQuery表单验证
1.表单校验种类 1.1对用户名进行判空 1.2密码长度必须大于等于6个字符 1.3邮箱必须包含@特殊字符 1.4姓名中不能包含数字 <!DOCTYPE html> <html la ...
Web前端——表格表单练习
文章目录题目一:电子汇款单的制作源代码及效果展示题目二: 热门电影模板的制作源代码及效果展示题目三:用户注册页面的制作源代码及效果展示题目一:电子汇款单的制作要求: 源代码及效果展示 ...
Web前端 | HTML表单form
✅作者简介:一位材料转码农的选手,希望一起努力,一起进步!
【JavaLearn】（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
目录 1. jQuery定义和特点 1.1 jQuery 入门 1.2 jQuery对象和DOM对象 2. jQuery 选择器 2.1 基本选择器 2.2 属性选择器 2.3 位置选择器 2.4 表 ...
【JavaLearn】#（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
1. jQuery定义和特点 1.1 jQuery 入门对 JavaScript 进行了封装,降低了使用JavaScript的难度,可以大幅提高开发效率(Write less, do more) j ...
jQuery学习之：Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
【转】ASP.NET 表单验证实现浅析
对于Web应用的表单身份验证,因为公司有一个类库,采用 Session 实现,所以一直都没有去仔细了解.其实我并不赞成在 .NET 中用 Session 实现身份验证,毕竟 .NET 提供了一个强大的 ...
bootstrap3 第2课：表单验证
做Web开发,表单验证是再常见不过的需求了,友好的错误提示能增加用户体验.比如我们在提交之前,首先要验证有哪些数据是必填项,哪些数据的格式需要验证. 如果我们的网页使用的bootstrap3框架搭建的 ...
视频教程-Web前端开发利器 SPRY框架之表单验证-JavaScript
Web前端开发利器 SPRY框架之表单验证有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...

web前端之表单验证（一）

表单验证之错误信息右方提示

说明

效果图

html代码

css代码

jquery代码

web前端之表单验证（一）相关推荐

最新文章

热门文章