简单的表单验证(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 ...
随机推荐
- 解决VS2010批量替换时经常由于内存较低而导致VS2010自动关闭的问题
尊重原著作:本文转载自http://www.cnblogs.com/Sharping/p/3165527.html 情况描述 在使用VS2010 开发Web应用程序的时候,批量替换时经常卡死关闭. 一 ...
- ZOJ 3261 - Connections in Galaxy War ，并查集删边
In order to strengthen the defense ability, many stars in galaxy allied together and built many bidi ...
- Android_Dialog cancle 和dismiss 区别
AlertDialog使用很方便,但是有一个问题就是:dismiss方法和cancel方法到底有什么不同? AlertDialog继承与Dialog,现在各位看看结构图: 然后在Dialog类中找到了 ...
- 一次非典型的SQL报错
昨天调试一个表值函数,结果出现了这个错误. mplicit conversion of varchar value to varchar cannot be performed because the ...
- 学习笔记-menusript控件中条目权限设置使用
在做一个小程序的时候,偶然发现了使用menusript控件做权限设置的方法,仅此标记,以供参考. 首先创建一个实例:testuseright.sln, 在项目文件里创建两个窗体:Form1.cs和us ...
- Spring包的方法WebUtils.getParametersStartingWith（request，String）
举个例子,比如页面上有 <input type="text" name="p_name" value="aileen"> < ...
- RedHat6.5网卡问题总结
问题描述:准备用RedHat6.5安装Oracle 12c RAC,系统环境准备好后发现,新版本的RedHat网卡配置跟以前不大一样,总结问题与解决方法如下: 1.找不到eth0文件 在使用RedHa ...
- Android第三方应用分享图文到微信朋友圈 & 微信回调通知分享状态
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWQAAAKUCAIAAAC8A9XzAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWX ...
- linux下安装配置svn独立服务器
subversion(以下简称svn)是近年来崛起的版本管理工具,是cvs的接班人. svn服务器有2种运行方式:独立服务器和借助apache.2种方式各有利弊. file:/// 直接版本库访问(本 ...
- 二叉查找树的Insert和Delete操作
struct TreeNode{ SearchTree Left; SearchTree Right; ElementType Ele; }; /*递归一定有出口*/ /*递归代码就是要重复使用*/ ...