用JavaScript制作一个表单

JavaScript033

用JavaScript制作一个表单,第1张

<html>

<meta http-equiv="Content-Type" content="text/html charset=gb3212"/>

<head>

<style type="text/css">

div { margin: 4px auto text-align: center }

label { display: inline-block text-align: right width: 100px margin-right: 10px }

button { margin: 4px }

input { width: 150px }

</style>

<script>

//没用使用jquery, 如果是jquery,会更容易一些。

window.onload = function(){

var form = document.createElement("form")

form.setAttribute("method", "post")

form.append(createRow("username", "text", "用户名: "))

form.append(createRow("userpwd", "password", "密码: "))

form.append(createRow("reuserpwd", "password", "确认密码: "))

form.append(createRow("useremail", "text", "电子邮件: "))

var div = document.createElement("div")

var btn = document.createElement("button")

btn.setAttribute("type", "button")

btn.append(document.createTextNode("验证"))

btn.onclick = function(){ return checkform(false) }

div.append(btn)

btn = document.createElement("button")

btn.setAttribute("type", "submit")

btn.append(document.createTextNode("提交"))

btn.onclick = function(){ return checkform(true) }

div.append(btn)

form.append(div)

document.body.append(form)

}

function createRow(_name, _type, _text){

var div = document.createElement("div")

div.append(createLabel(_text))

div.append(createTextBox(_name, _type))

return div

}

function createTextBox(_name, _type){

var txt = document.createElement("input")

txt.setAttribute("type", _type)

txt.setAttribute("name", _name)

return txt

}

function createLabel(_text){

var lbl = document.createElement("label")

lbl.append(document.createTextNode(_text))

return lbl

}

function checkform(bln){

var form = document.forms[0]

if(form.username.value.length < 4){

alert("用户名至少包含4个字符")

return false

}

if(form.userpwd.value.length < 8){

alert("密码至少包含8个字符")

return false

}

if(form.userpwd.value != form.reuserpwd.value){

alert("两次密码不一致")

return false

}

if(!(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/gi).test(form.useremail.value)){

alert("邮箱不符要求")

return false

}

if(!bln){ alert("验证通过") }

return bln

}

</script>

</head>

<body>

</body>

</html>

可以手动构建一个FormData进行表单提交,代码如下:

var form = new FormData()

//添加参数

form.append('name', 'jack')

form.append('age', 20)

//使用xmlhttprequest发起请求

var xhr = new XMLHttpRequest()

xhr.open('post', '这里添上请求的url', true)

xhr.onreadystatechange = function() {

    if(xhr.readyState == 4) {

        //成功

    }

}

//执行请求

xhr.send(form)

您好:首先动态创建表格。

定义好表格的html代码:

“<table><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr></table>”

然后用js的createElement()方法,或者用jqurey的$("html代码")创建元素。然后用apendchild()方法动态插入到网页中就可以了。td里面是文本框的话,默认就会有tab键移动光标等效果的,不用自己写。(自己写也可以,就是让文本框活的焦点,blur一下就行)。至于删除行和列的话,可以先的到删除行的id或者class,然后remove()一下就可以了。