<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>html02.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function checkUname(){
return checkElement("uname","用户名",6,12,"用户名的长度6-12位之间");
}
function checkPwd(){
return checkElement("pwd","密码",4,12,"密码的长度4-12位之间")&&checkPwd2();
}
function checkPwd2(){
var pwd = document.getElementById("pwd").value;
var pwd2 = document.getElementById("pwd2").value;
var span = document.getElementById("pwd2Span");
if(pwd2==null||pwd2.length==0){
span.innerHTML="<font color='red'>数据项[重复密码]不能为空!!!</font>";
return false;
}else if(pwd2!=pwd){
span.innerHTML="<font color='red'>数据项[密码]和[重复密码]不一致!!!</font>";
return false;
}else{
span.innerHTML="<font color='green'>OK!!!</font>";
return true;
}
}
function checkEmail(){
return checkElement("email","邮箱",10,25,"邮箱的长度10-25位之间");
}
function checkGrjj(){
return checkElement("grjj","个人简介",10,200,"个人简介请保持在10-200字以内");
}
function checkElement(eleId,eleName,minLen,maxLen,errMsg){
var ov = document.getElementById(eleId).value;
var span = document.getElementById(eleId+"Span");
if(ov==null||ov.length==0){
span.innerHTML="<font color='red'>数据项["+eleName+"]不能为空!!!</font>";
return false;
}else if(ov.length<minLen||ov.length>maxLen){
span.innerHTML="<font color='red'>"+errMsg+"</font>";
return false;
}else{
span.innerHTML="<font color='green'>OK!!!</font>";
return true;
}
}
function checkFav(){
var favs = document.getElementsByName("fav");
var span = document.getElementById("favSpan");
for(var i=0;i<favs.length;i++){
if(favs[i].checked){
span.innerHTML="<font color='green'>OK!!!</font>";
return true;
}
}
span.innerHTML="<font color='red'>爱好至少选择一项</font>";
return false;
}
function checkAgree(){
var agree = document.getElementsByName("agree");
var span = document.getElementById("agreeSpan");
if(agree[0].checked){
span.innerHTML="<font color='green'></font>";
return true;
}else{
span.innerHTML="<font color='red'>为了更好的服务,请您务必同意服务条款</font>";
return false;
}
}
function checkSchool(){
var school = document.getElementById("school");
var span = document.getElementById("schoolSpan");
if(school.value==0){
span.innerHTML="<font color='red'>请选择正确的毕业学校</font>";
return false;
}else{
span.innerHTML="<font color='green'>OK!!!</font>";
return true;
}
}
function checkForm(){
var unameFlag = checkUname();
var pwdFlag = checkPwd();
var pwd2Flag = checkPwd2();
var emailFlag = checkEmail();
var grjjFlag = checkGrjj();
var favFlag = checkFav();
var schoolFlag= checkSchool();
var agreeFlag = checkAgree();
return unameFlag&&pwdFlag&&emailFlag&&grjjFlag&&favFlag&&schoolFlag&&pwd2Flag&&schoolFlag&&agreeFlag;
}
</script>
</head>
<body style="text-align: center;">
<form action="#" method="get" onsubmit="return checkForm();">
<h1>用户注册页面</h1>
<table border="1" style="margin: auto;width: 600px;">
<tr>
<th>用户名</th>
<td>
<input type="text" name="uname" id="uname" onblur="checkUname();"/>
<span id="unameSpan">用户名的长度6-12位之间</span>
</td>
</tr>
<tr>
<th>密码</th>
<td>
<input type="password" name="pwd" id="pwd" onblur="checkPwd();"/>
<span id="pwdSpan">密码的长度4-12位之间</span>
</td>
</tr>
<tr>
<th>重复密码</th>
<td>
<input type="password" id="pwd2" onblur="checkPwd2();"/>
<span id="pwd2Span">重复密码的长度4-12位之间</span>
</td>
</tr>
<tr>
<th>邮箱</th>
<td>
<input type="text" name="email" id="email" onblur="checkEmail();"/>
<span id="emailSpan">邮箱的长度10-25位之间</span>
</td>
</tr>
<tr>
<th>性别</th>
<td>
<input type="radio" name="gender" value="1" checked="checked"/>男
<input type="radio" name="gender" value="0"/>女
</td>
</tr>
<tr>
<th>婚否</th>
<td>
<input type="radio" name="marry" value="0" checked="checked"/>未婚
<input type="radio" name="marry" value="1"/>已婚
<input type="radio" name="marry" value="2"/>离异
</td>
</tr>
<tr>
<th>爱好</th>
<td>
<input type="checkbox" name="fav" value="1" onclick="checkFav();"/>章子怡
<input type="checkbox" name="fav" value="2" onclick="checkFav();"/>刘亦菲
<input type="checkbox" name="fav" value="3" onclick="checkFav();"/>杨小缘
<input type="checkbox" name="fav" value="4" onclick="checkFav();"/>刘洋
<span id="favSpan">爱好至少选择一项</span>
</td>
</tr>
<tr>
<th>毕业学校</th>
<td>
<select name="school" id="school" onchange="checkSchool();">
<option value="0">--请选择--</option>
<option value="1">哈佛大学</option>
<option value="2">深泉学院</option>
<option value="3">伦敦小学</option>
<option value="4">剑桥大学</option>
<option value="5">慕尼黑大学</option>
</select>
<span id="schoolSpan">请选择正确的毕业学校</span>
</td>
</tr>
<tr>
<th>个人简介</th>
<td>
<textarea rows="5" cols="30" name="grjj" id="grjj" onblur="checkGrjj();"></textarea>
<span id="grjjSpan">个人简介请保持在10-200字以内</span>
</td>
</tr>
<tr>
<th colspan="2">
<input type="checkbox" name="agree" id="agree" checked="checked" onclick="checkAgree();">同意<a href="">服务条款</a>
<span id="agreeSpan"></span>
</th>
</tr>
<tr>
<th colspan="2">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="表单验证" onclick="checkForm();"/>
</th>
</tr>
</table>
</form>
</body>
</html>
- 大小: 20.5 KB
分享到:
相关推荐
原生JS经典小项目-form表单校验
javascript的表单简单进行验证操作,一个html的代码实例
全网最全的 表单验证, js表单验证,form表单验证,前端验证,简介验证 email URL 登陆验证
jQuery Validate表单验证插件,前端jq验证,jq验证插件
jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)...
集成bootstarp前端样式和Jquery的常见表单元素验证示例代码
Jquery formvalidation的源码和示例,收费版本前的最后一个免费版本。
我们之前写的代码都没有对前端input框输入的数据做验证,我们今天来看下,如果做form表单的数据的验证 在views文件做验证 首先用文字描述一下流程 1、在views文件中导入forms模块 2、然后创建一个类,继承forms.form...
django的表单系统,分2种 基于django.forms.Form的所有表单类的父类 基于django.forms.ModelForm,可以和模型类绑定的Form ... #forms对应的是前端的form表单,form 表单要验证的字段 #都与校验有关系,与数
前端项目-vue-form,Vue.js的表单验证
经典的JS特效动画效果,效果实现的全部代码已提供,可供学习借鉴
前端的童鞋在写页面时, 都不可避免的总会踩到 表单验证 这个坑. 这时候, 我们就要跪了, 因为要写一堆 js 来检查. 但是自从 H5 出现后, 很多常见的 表达验证 , 它都已经帮我们实现了, 让我们减轻了很多负担, 就好像...
第一步: 引用两个文件 ... /*删除开始*/ $(.del).click(function () { var id = $(this).attr(id); layer.alert('您确定要删除操作吗?...skin: 'layui-layer-molv' //样式类名 自定义样式 , closeBtn: 1 // 是否显示...
jQuery formValidator高级表单验证,前端输入数据状态判断
validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式: 1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax...
本来想从用户注册开始写起,但发现东西比较多,涉及到界面、前端验证、前端加密、后台解密、用户密码Hash、权限验证等等,文章写起来可能会很长,所以这里主要介绍的是登录验证和权限控制部分,有兴趣的朋友欢迎一起...
validation 表单验证不可缺少的数据源带 form.js
AngularJS UI 表单验证(引导程序) ... 项目状态:(开发中) 安装 鲍尔 bower install ui-form-validation 用法 在 HTML 中包含脚本位置: [removed][removed] 在您的应用程序中添加uiFormValidation模块: ...
next-form-auth:身份验证登录和注册表单前端
我将表单验证的所有插件包资源打包在一起上传,为了以后再有此需求时自己能找得到,有需要的也可以支持一下。 具体用法参照该博客:https://mp.csdn.net/mdeditor/102658565#