简单的表单验证(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 ...
随机推荐
- last reboot
last reboot是一个linux命令,查看上次重启时间等相关信息
- javascript必知必会之prototype
本博客所有内容采用 Creative Commons Licenses 许可使用. 引用本内容时,请保留 朱涛, 出处 ,并且 非商业 . 点击 RSS 进行订阅.(推荐使用 google reade ...
- uilable 换行标记
m_tipLabel.lineBreakMode = UILineBreakModeWordWrap; m_tipLabel.numberOfLines = 0; m_tipLabel.text = ...
- C#中的多线程-入门
概述与概念C#支持通过多线程并行地执行代码,一个线程有它独立的执行路径,能够与其它的线程同时地运行.一个C#程序开始于一个单线程,这个单线程是被CLR和操作系统(也称为“主线程”)自动创建的,并具有多 ...
- codevs1145
题目描述 Description 给定A.B.C三根足够长的细柱,在A柱上放有2n个中间有孔的圆盘,共有n个不同的尺寸,每个尺寸都有两个相同的圆盘,注意这两个圆 ...
- （Qt 翻译） QGLAbstractScene
QGLAbstractScene Class Reference #include <QGLAbstractScene> This class was introduced in Qt3D ...
- Ubuntu packages multi-architectures
Show current machine architecture dpkg --print-architecture It's built-in to the currently installed ...
- Android设置全屏
全屏显示 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLA ...
- CSS自学笔记（11）:CSS3背景和边框
CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...
- Zabbix监控Linux主机设置
说明: Zabbix监控服务端已经配置完成,现在要使用Zabbix对Linux主机进行监控. 具体操作: 以下操作在被监控的Linux主机进行,这里以CentOS 6.x系统为例. 一.配 ...