js关于表单校验完善
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style type="text/css">
.left{
width: 100px;
text-align: right;
}
.right{
width: 800px;
}
.input{
width: 400px;
height: 30px;
}
</style>
<script>
// 获得焦点时 定义两个形参 info是指为span标签添加的内容
function showTips(id,info){
// 找到id+"span"标签 在其内加入<font color='red'>info</font>
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}
// 失去焦点时
function check(id,info){
// 定义一个变量 获得id标签内的内容
var content=document.getElementById(id).value;
if(content==""){
// 如果获得的内容为空 为后边span标签添加info 提示用户
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}else{
// 如果不为空 就把空字符串给span添加 显示不出来
document.getElementById(id+"span").innerHTML="";
}
}
</script>
</head>
<body>
<!--确定事件并绑定函数-->
<form action="#" method="post" name="longFrom" οnsubmit="checkFrom()">
<table border="0" align="center" cellpadding="0" cellspacing="50">
<tr>
<td class="left">用户名</td>
<td class="right">
<input type="text" class="input" id="user" οnfοcus="showTips('user','用户名必填')" οnblur="check('user','用户名不能为空')"/><span id="userspan"></span>
</td>
</tr>
<tr>
<td class="left">密码</td>
<td class="right">
<input type="password" class="input" id="pas" οnfοcus="showTips('pas','用户名必填')" οnblur="check('pas','用户名不能为空')"/><span id="passpan"></span>
</td>
</tr>
<tr>
<td class="left">确认密码</td>
<td class="right">
<input type="password" class="input" id="repas" οnfοcus="showTips('repas','用户名必填')" οnblur="check('repas','用户名不能为空')"/><span id="repasspan"></span>
</td>
</tr>
<tr>
<td class="left"></td>
<td class="right">
<input type="submit" value="提交" style="padding: 10px;"/>
</td>
</tr>
</table>
</form>
</body>
</html>
转载于:https://www.cnblogs.com/bxl-1016/p/10458842.html
js关于表单校验完善相关推荐
- validate.js 插件表单校验
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- ext js ajax表单校验,Extjs之grid单元格编辑校验(示例代码)
效果如图所示: 1. 添加CSS样式 .x-grid-cell-invalid .x-grid-cell-inner:before{content: "";position: ab ...
- js-最常用的js表单校验1
最近写了无数各种形式的表单,记录下奇奇怪怪的校验规则~ 一:首先是element自带的rules校验规则: element作为常用框架,自带rules属性简单易懂,官方文档一目了然,不再赘述,应付常用 ...
- Day84.尚好房 — 功能提取、页面封装、jquery-validate表单校验、完成角色 | 用户管理模块
目录 角色管理模块 一.角色管理代码封装 ★ 1.封装BaseDao 2.封装BaseDao 3.封装BaseServiceImpl 4.封装Controller层 二.前端页面封装 1.封装头部c ...
- jQuery表单校验jquery.validate.js的使用
jQuery是一个快速.简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互.使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅 ...
- 【前端2】js：原始类型，运算符，调试，页面加载，轮播图，Bom（对象，时钟），Dom（全选全不选，省市级联，隔行/触摸换色，表单校验）
文章目录 1.js两种引入:js最终要引入到html在浏览器中运行 2.js五大原始类型:undefined 3.js的运算符和流程控制:js不支持单&和单|性能低 4.案例_99乘法表:So ...
- Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
- 轻量级的jQuery表单校验插件: Happy.js
当前已经有许多jQuery表单校验插件,并且有些也很不错,但这些插件功能太强大,使用比较复杂.如果你想找一个简单点的插件 Happy.js 刚好是一个很好的选择. 这个插件是轻量级的,所以只支持一些输 ...
- 实战课【1】jQuery实现表单校验及布局
实战课[1]jQuery实现表单校验及布局 在学习完html,css,js,mysql,jdbc,Servlet,filter,ajax,maven等web基础知识后,开始进行项目实战.此文就会记录在 ...
最新文章
- 16岁应该遵循什么_16岁就被张艺谋选中，刘浩存到底有什么来头？
- vr rgb yuv学习资料整理
- js中的(function(){...})()
- EXCEL的下拉列表
- Hibernate之深入Hibernate的映射文件
- Java关于 class类的基础方法
- 屠呦呦凭什么获诺奖？
- （228）FPGA岗位有哪些？
- tomcat7 mysql 连接池_Tomcat7 新的数据库连接池Tomcat jdbc pool介绍和配置
- Matlab之三维曲面的绘制
- 汽车智能电气技术分析
- MySQL for Excel的安装教程
- 树莓派硬件编程——（一）用RPi.GPIO库输出信号
- 黑群晖二合一已损毁_手动修复黑群晖已损毁磁盘空间
- C语言中%d %.2d %2d %02d的区别
- 【浏览器】【vue】修改网页上的页签图标
- 评价效率DEA方法原理
- matlab pid buck,基于MATLAB的BUCK电路设计与PID闭环仿真
- 【SeedLab】ARP Cache Poisoning Attack Lab
- 火狐浏览器添加自动阻止加密挖矿选项