<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)
