简单的表单验证(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 ...
随机推荐
- dom处理配置文件_待完善
import java.io.File;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java ...
- L10 数据入站、转发、出站流程
二 写出防火墙规则链之间的顺序也就是入站数据流向.转发数据流向.出站数据流向的过程 入站:PREROUTING→INPUT 数据包到达防火墙,由prerouting处理,判断是否修改地址 路由选择:判 ...
- 利用SQL语句产生分组序号
partition by关键字是分析性函数的一部分,它和聚合函数不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录,partition by用于给结果集分组,如果没 ...
- matlab求方差，均值，均方差，协方差的函数
1. 均值 数学定义: Matlab函数:mean >>X=[1,2,3] >>mean(X)=2 如果X是一个矩阵,则其均值是一个向量组.mean(X,1)为列向量的均值,m ...
- Apache-Tomcat 和 Apache-Maven配置
1.1.下载安装文件 官网对应版本下载,例:apache-tomcat-8.0.35-windows-x64.zip 1.2.指定对应的安装目录: 例:D:\JavaSoft\apache-tomca ...
- html5的video标签支持的视频格式
- webpack 多入口配置
同事套搭建vue项目,个人推荐了VUE官网的vue-cil的方式,http://cn.vuejs.org/guide/application.html 顺着官网的操作,我们可以本地测试起我们的项目 n ...
- KO.js学习笔记(一)
1.官方网站:knockoutjs.com 2.要dom树加载完毕才能绑定数据 3.ui能实时更新,使用了ko的一个自定义属性:data-bind 4.可以对viewmodel中的属性添加subsci ...
- Oracle 转换函数
Oracle 转换函数 -- TO_CHAR(date|number {,fmt} {,nlsparams}) fmt:格式内容,返回的字符串是什么格式的,在此处指定:nlsparams:指定国家语言 ...
- linux学习之（三）-文件操作命令
创建一个空文件: touch 文件名 例:touch tom 查看: 查看一个文件的内容命令cat 文件名 例:cat tom 注:cat命令并不能显示文件的所有信息,但屏幕显示的 行数是有 ...