简单的表单验证(js、jquery)
//javascript代码
function valForm(){
var username=document.getElementById("username");
var pwd=document.getElementById("pwd");
var repwd=document.getElementById("repwd");
var email=document.getElementById("email");
var age=document.getElementById("age");
var cardid=document.getElementById("cardid");if(username.value==""){
alert("用户名不能为空");
return false;
}else if(username.value.length<4||username.value.length>16){
alert("用户名长度不符合规则！\n 用户名长度应为4-16个字符");
return false;
}else if(pwd.value==""){
alert("密码不能为空");
return false;
}else if(pwd.value!=repwd.value){
alert("密码不一致");
return false;
}else if(email.value.indexOf(".")<0||email.value.indexOf("@")<0){
alert("邮箱错误");
return false;
}else if(parseInt(age.value)<18&&parseInt(age.value)>80) {
alert("年龄错误");
return false;
}else if(reg.test(cardid.value)==false){
alert("身份证不合法");
return false;
}else{
document.forms[0].submit();
return false;
}
}
//Jquery
$(function(){
$("#regUser").click(function(){
if($("#username").val()==""||$("#username").val().length<4){
alert("用户名不符合要求")
}else if($("#pwd").val().length<6){
alert("密码不符合要求");
}else if($("#repwd").val()!=$("#pwd").val()){
alert("密码不一致")
}else if($("#email").val().indexOf("@")<0||$("#email").val().indexOf(".")<0){
alert("邮箱格式错误")
}else if($("#age").val()<18||$("#age").val()>80){
alert("年龄不符合要求")
}else{
window.location.href="jquery1.html";
}
})
})
body内容
<body>
<form action="js实例.html" method="post">
<table border="0">
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username" /></td>
<td> </td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="pwd" id="pwd" /></td>
<td> </td>
</tr>
<tr>
<td>重复密码</td>
<td><input type="password" name="repwd" id="repwd" /></td>
<td> </td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" name="email" id="email" /></td>
<td> </td>
</tr>
<tr>
<td>年龄：</td>
<td><input type="text" name="age" id="age" /></td>
<td> </td>
</tr>
<tr>
<td><a href="#" id="regUser">注册</a></td>
<td><a href="#" >重置</a></td>
</tr>
</table>
</form>
</body>
简单的表单验证(js、jquery)的更多相关文章
- 用jQuery写的最简单的表单验证
近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...
- jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- 表单验证插件jquery.validate的使用方法演示
jQueryValidate表单验证效果 jquery.validate验证错误信息的样式控制 <!--validate验证插件的基础样式--> input.error{border: 1 ...
- angularjs学习第四天笔记（第一篇：简单的表单验证）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- Struts2之Action三种接收参数形式与简单的表单验证
有了前几篇的基础,相信大家对于Struts2已经有了一个很不错的认识,本篇我将为大家介绍一些关于Action接收参数的三种形式,以及简单的表单验证实现,下面进入正题,首先我们一起先来了解一下最基本的A ...
- 使用 layUI做一些简单的表单验证
使用 layUI做一些简单的表单验证 <form method="post" class="layui-form" > <input name ...
- jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js
原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...
- jQuery插件 -- 表单验证插件jquery.validate.js
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...
随机推荐
- myql 注意事项
在[mysqld]下加入一行:lower_case_table_names=1,1为不区分大小写,0是区分大小写...并/etc/init.d/mysql restart即可...
- 开博第二篇：记一个利用JavaScript，编写PS脚本，开发图片量产工具
背景:身在一个有实业的电商公司,设计部的妹子们总是会有做不完的商品图片,当然了,要是做点有技术含量的美化工作也罢,但是最近她们很是无聊,总是要做一些重复性的工作,就比如如题所说的,图片量产,量产什么呢 ...
- mongoengine连接错误：“False is not a read preference”解决方法
问题出现: Mongoengine是一个可以操作MongoDB数据库的对象-文档映射器(Object-Document Mapper).出于工作需要,最近在使用MongoDB+Django实现一个数据 ...
- iOS把一个简单的图形变成一个圆
push是定义的一个button push.layer.masksToBounds = YES; push.layer.cornerRadius = 100; push.layer.borderWid ...
- Diet
Dialogue 1 Healthy diet 关于健康饮食 F:Bob, look at this sentence. 'Healthy eating is not about strict n ...
- 实现水电气一卡通 IC卡扇区分配
现在市面上我们接触到的IC卡大部分都是分为16个扇区,分别标注为0-15区.而实现一卡通的秘密就在这16个扇区之中,一个,或者一类功能用途读取这一个扇区,除了一般默认0扇区不用外,其他扇区可以被分别加 ...
- ThinkPHP框架下基于RBAC的权限控制模式详解
这几天因为要做一个项目,需要可以对Web应用中通用功能进行封装,其中一个很重要的涉及到了对用户.角色和权限部分的灵活管理.所以基于TP框架自己封装了一个对操作权限和菜单权限进行灵活配置的可控制模式. ...
- 论山寨手机与Android 【13】SmartPhone AP系统
在第9章中我们提到,从功能上讲对于智能手机的一个粗略的概括是,智能手机 == 电脑 + 移动网卡,或者更准确地说,智能手机的硬件结构分为应用程序处理器AP,和基带处理器BP两个部分.这里隐含着两个问题 ...
- OleVariant的本质
OleVariant的本质 OleVariant,COM的一种数据类型.MIDAS基于COM之上构建的,自然使用OleVariant作为数据序列格式. 延续到现在最新的DATASNAP仍然支持它. T ...
- Delphi 取外网IP
近日偶要做个程序,需要获得外网IP,偶去网上找相关资料,发现都不尽如人意,有的只能获得本地网卡的IP,有的通过httpget控件获取IP,还有甚者做个asp再调用偶是个懒人,而且上面提到的方法,不是获 ...