<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>
这还不容易、用js可以完全做到。颜色的变化就不说了。直接控制class的值即可。保存内容只需要在鼠标点击事件里面写保存即可，如果是提交到后台，可以用ajax做，至于你的submit这个问题。我不是很了解你想表达的表单的位置大小需要你用CSS设计。以下代码只是实现了你要的弹出功能。
<!DOCTYPE html><html>
<head>
<title>HTML模板</title>
<meta charset="UTF-8"/>
<style type="text/css">
form{
position:absolute
left:100px
top:50px
width:400px
height:300px
border:1px solid #aaaaaa
}
</style>
<script>
var t
function closeForm(){
var form=document.getElementById("form")
form.style.display="none"
}
function showForm(){
var form=document.getElementById("form")
form.style.display="block"
window.clearTimeout(t)
}
function timer(){
t=window.setTimeout(showForm,10000)
}
</script>
</head>
<body onload="timer()">
<form id="form" style="display:none">
<input type="text"/>
<input type="button" value="关闭" onclick="closeForm()"/>
</form>
</body>
</html>
