简单的表单验证(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 ...
随机推荐
- 数据结构 B树、B-树、B+树、B*概念
B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...
- Linux学习4——Vim和Bash
一.写在前面 本将将介绍Linux自带的强大的文本编辑器Vim和Bash的相关知识. 二.完成目标 1.了解Vim和Bash的基本概念 2.定制自己的vim 3.Bash中的一些命令 4.管道命令 ...
- zepto.js 处理Touch事件（实例）
处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过eve ...
- zepto 获取checked selected元素
原文阅读:WISER CODER 1. Zepto.js and the :selected and :checked selectors 如果你已经看上了jQuery那残弱的表兄弟, Zepto.j ...
- c#中的数据类型简介(枚举)
C#中的数据类型简介(枚举) 枚举的定义 根据MSDN上给出的定义,枚举是一个指定的常数集,其基础类型可以是除Char外的任何整型. 如果没有显式声明基础类型,则使用 Int32. Enum 是 .N ...
- 用JQuery实现表格隔行变色和突出显示当前行
用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...
- 存储过程与SQL的结合使用
--1调用存储过程exec 存储过程名 参数 openrowset方法使用: select * from openrowset('sqlncli', 'server=192.168.247.64;ui ...
- jquery实现带左右箭头和数字焦点的图片轮播手写代码
以前图片轮播经常用网上的插件,然后想说自己也要认真看看,一步一步弄明白,所以就自己研究写了个图片轮播的代码,我自己觉得还算是挺简单的.如有改进的地方,欢迎你能帮我指出,共同进步. (ps:博客园如何上 ...
- javascript获取元素结点到页面的绝对距离的方式
var div = document.getElementById('div');var p = getPos(div); function getPos(obj) { var pos = {left ...
- JS判断是否在微信浏览器打开
if (browser.versions.mobile) {//判断是否是移动设备打开.browser代码在下面 var ua = navigator.userAgent.toLowerCase(); ...