HTML DOM 中的form

HTML  DOM中的form表单

form表单获取:

var form = document.forms;

一.百度表单验证

样式代码:

<style type="text/css">

form{

width:750px;

margin: 0 auto;

position: relative;

}

.span_first{

width: 65px;

height: 42px;

display: inline-block;

color: black;

font-weight: bold;

}

input{

width: 350px;

height: 40px;

font-size: 16px;

margin-top: 10px;

}

#code{

width: 200px;

height: 40px;

}

button{

width: 130px;

height: 45px;

margin-left: 15px;

z-index: 0;

cursor: pointer;

}

#chk{

width: 13px;

height: 13px;

margin-left: 65px;

}

#sub{

height: 50px;

margin-left: 65px;

border-radius: 5px;

background-color: #3f89ec;

border: 0 ;

margin-top: 10px;

color: white;

font-size: 16px;

font-weight: 700;

text-align: center;

cursor: pointer;

}

a{

text-decoration: none;

color: #666;

}

.span_none{

display: none;

}

.span_show{

color: #666;

font-size: 12px;

margin-left: 10px;

}

.error_show{

color: red;

font-size: 14px;

}

ul{

width:305px;

position: absolute;

left: 410px;

top: 120px;

}

label{

height: 14px;

line-height: 14px;

color: #666;

font-size: 12px;

cursor: pointer;

}

</style>

js代码:

<body>

<form action="#" method="get">

<span class="span_first">用户名</span>

<input type="text" name="userName" value placeholder="请设置用户名">

<span class="span_none" >设置后不可更改中英文均可,最长14个英文或7个汉字</span>

<span class="span_none">用户名不能超过7个汉字或14个字符</span>

<br>

<span class="span_first">手机号</span>

<input type="text" name="phone" value placeholder="可用于登录和找回密码">

<span class="span_none">请输入中国大陆手机号,其他用户不可见</span>

<span class="span_none">请输入正确的电话号码</span>

<br>

<span class="span_first">密码</span>

<input type="password" name="pWd" value placeholder="请设置登录密码">

<span class="span_none">

<ul>

<li>长度为8-14个字符</li>

<li>支持数字,大小写字母和标点符号</li>

<li>不允许有空格</li>

</ul>

</span>

<span class="span_none">密码格式不正确</span>

<br>

<span class="span_first">验证码</span>

<input type="txt" id="code" name="paWd" value placeholder="请输入验证码">

<button>获取短信验证码</button>

<br>

<input type="checkbox" name="check" id="chk">

<label for="chk">阅读并接受....</label>

<span class="span_none">请勾选百度协议</span>

<br>

<input type="submit" id="sub" value ="注册">

</form>

<script type="text/javascript">

var form = document.forms[0];

//获得焦点事件

form.userName.onfocus = function(){

this.nextElementSibling.className ="span_show";

this.nextElementSibling.nextElementSibling.className ="span_none";

}

form.phone.onfocus = function(){

this.nextElementSibling.className = "span_show";

this.nextElementSibling.nextElementSibling.className ="span_none";

}

form.pWd.onfocus = function(){

this.nextElementSibling.className = "span_show";

this.nextElementSibling.nextElementSibling.className ="span_none";

}

form.paWd.nextElementSibling.onclick = function(){

var arr = [];

for(var i=0;i<4;i++){

arr[i] = Math.floor(Math.random()*10);

}

var num = arr.join("");

this.innerHTML = num;

return false;

}

//失去焦点的事件

form.userName.onblur = function(){

this.nextElementSibling.className ="span_none";

useBlur(this);

}

form.phone.onblur = function(){

this.nextElementSibling.className ="span_none";

phoBlur(this);

}

form.pWd.onblur = function(){

this.nextElementSibling.className ="span_none"

pWdBlur(this);

}

//验证函数

function useBlur(elem){

var reg = /(^\w{1,14}$)|(^[\u4e00-\u9fa5]{1,7}$)/;

if (reg.test(elem.value)){

}else{

elem.nextElementSibling.nextElementSibling.className ="error_show"

}

}

function phoBlur(elem){

var reg = /^(\+86|0086)?\s*1[3456789]\d{9}$/;

if(reg.test(elem.value)){

}else{

elem.nextElementSibling.nextElementSibling.className ="error_show"

}

}

function pWdBlur(elem){

var reg = /^([0-9a-zA-Z]|.){8,14}$/;

if(reg.test(elem.value)){

}else{

elem.nextElementSibling.nextElementSibling.className ="error_show"

}

}

form.elements[form.length-1].onclick=function(){

if(true){

form.userName.nextElementSibling.nextElementSibling.className ="error_show";

}

if(true){

form.phone.nextElementSibling.nextElementSibling.className ="error_show";

}

if(true){

form.pWd.nextElementSibling.nextElementSibling.className ="error_show";

}

if(true){

form.check.nextElementSibling.nextElementSibling.className="error_show";

}

else{

form.submit();

}

}

</script>

界面展示:

不足之处:当输入的格式正确和不正确的时候,后面的提示没有图标提示只有文字提示,因为我觉得原理都一样,

就没有去找图片,添加图标,其实是本人比较懒。

练习题:

深度克隆:

//定义一个函数检测对象数据类型

function checkType(data){

return Object.prototype.toString.call(data).slice(8,-1);

}

//定义深度克隆的函数

function deepClone(target){

//调用函数checkType检测目标target的数据类型

var result ,targetType = checkType(target); //Array Object

if(targetType === "Object"){

result = [];

}else if(targetType === "Array"){

result = {};

}else{

//否则就是基本数据类型

return target;

}

for(var i in target){ //i表示对象的key或数组的下标

//获取属性名为i的属性值

var value = target[i]

//调用checkType函数检查当前属性的类型

var valueType = checkType(value);

//如果克隆的对象中还有对象或数组时,接着调用deepClone函数

if(valueType ==="Object" || valueType === "Array"){

result[i] = deepClone(value);

}else{

//否则就为基本数据类型

result[i] = value;

}

}

return result;

}

浅度克隆:

<script>

var lilei = {

Sname:"Lilei",

Sage: 11,

intr(){

console.log("My name is"+this.Sname+"My age is"+this.Sage);

}

}

function clone(obj){

var newobj = { }

for(var key in obj){

newobj[key] = obj[key];

}

return newobj;

}

</script>

原文地址:https://www.cnblogs.com/hyh888/p/11405110.html

时间: 2024-10-03 10:29:17

HTML DOM 中的form的相关文章

Javascript中的Form表单知识点总结

在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement,因此与其他HTML元素具有相同的默认属性:HTMLFormElement有自己以下属性和方法: acceptCharset: 服务器能够处理的字符集:等价于HTML中的accept-charset特性: action:  接收请求的URL,等价于HTML中的action elements: 表单中所有控件的集合. enctype: 请求的编码类

DOM 中 Property 和 Attribute 的区别

原文地址:http://web.jobbole.com/83129/ property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property是DOM中的属性,是JavaScript里的对象: attribute是HTML标签上的特性,它的值只能够是字符串: 基于JavaScript分析property 和 attribute html中有这样一段代码: <input

DOM中document对象的常用属性方法总结

提要: 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问 1.常见对象属性 document.title                 //设置文档标题等价于HTML的<title>标签document.bgColor               //设置页面背景色document.fgColor               //设置前景色(文本颜色)document.linkColor    

在vue中使用 layui框架中的form.render()无效解决办法

下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法. 原文地址:小时刻个人技术博客 > http://small.aiweimeng.top/index.php/archives/layuiForm.html 近期开发的项目中前端ui框架用的是Layui,数据渲染使用vue去渲染,当我用vue渲染表单控件的数据时,会出现控件被禁用的情况,例如:select下拉等,于是去看文档,按照文档说的写了,结果然并卵,( ̄▽ ̄)".搞了半天都没搞好.然后在百度搜索了v

JQ中的clone()方法与DOM中的cloneNode()方法

JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(deep);  其接收一个可选参数"deep",为布尔类型,默认是false. 当设置为true,克隆当前节点,属性及当前节点的后代.若设置为false,仅仅克隆当前元素节点本身. 扩展:  使用cloneNode()方法,当被克隆的节点绑定了事件处理程序,事件处理程序是否会被一同克隆,这个我

DOM中的动态NodeList与静态NodeList

GitHub版本: https://github.com/cncounter/translation/blob/master/tiemao_2014/NodeList/NodeList.md 副标题: 为何getElementsByTagName()比querySelectorAll()快100倍 昨天,我在雅虎的同事 Scott Schiller (斯科特·席勒, 同时也是SoundManager创造者) 发Twitter询问为何getElementsByTagName("a") 在

HTML中常见的各种位置距离(clientTop clientLeft clientWidth ClientHeight offsetleft offsettop offsetwidth offsetheight等等)以及dom中的坐标讨论

最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的不好或者写错了,欢迎各位指正.好了废话不多说,开始进入主题. 这篇文章主要讨论两点: 一.DOM中各种宽度.高度 二.DOM中的坐标系 下面我们看看DOM中都有一些什么宽度.高度. 常见的 offsetWidth clientWidth scrollWidth offsetHeight client

javascript判断元素存在和判断元素存在于实时的dom中的方法

今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动页面,然后问题就出来了:页面无法向下滚动,调试工具的console里报了好多undefined的错误. 我马上意识到是我写的js代码错误的在首页被执行导致的问题,我的代码大致是这样: 1 if ($('#a')) { 2 // some code ... 3 $('#b').doSomething;

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes    子节点 firstChild    父节点里的第一个子节点 lastChild     父节点里的最后一个子节点 nextSibling    与子节点并列的下一个兄弟节点 previousSibling   与子节点并列的上一个兄弟节点 火狐与谷歌支持而ie8不支持的节点关系有: previous