<!doctype?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>表單驗證1</title>
????<style>
????????span?{
????????????font-size:?20px;
????????????font-family:?"微軟雅黑";
????????????font-weight:?bold;
????????}
????????#input-text?{
????????????margin:?0?10px;
????????????width:?500px;
????????????height:?50px;
????????????line-height:?60px;
????????????border-radius:?10px;
????????????outline:?0;
????????????border:?1px?solid?#999999;
????????}
????????#alert?{
????????????width:?200px;
????????????height:?30px;
????????????padding-left:?50px;
????????}
????????#input-submit?{
????????????background-color:?#2F79BA;
????????????color:?white;
????????????font-weight:?bold;
????????????font-size:?18px;
????????????width:?95px;
????????????height:?60px;
????????????line-height:?60px;
????????????border:?0;
????????????border-radius:?10px;
????????????outline:?0;
????????}
????</style>
????<script?type="text/javascript">
????????window.onload?=?function?()?{
????????????var?re?=?/[\u4e00-\u9fa5a-zA-Z0-9\-]{3,15}/g;
????????????var?oBtn?=?document.getElementById('input-submit');
????????????var?oInput?=?document.getElementById('input-text');
????????????var?ale?=?document.getElementById('alert');
????????????oInput.onfocus?=?function?()?{
????????????????ale.innerHTML?=?"必填,長度為4到16個字符";
????????????}
????????????function?show()?{
????????????????if?(?oInput.value?==?"")?{
????????????????????ale.innerHTML?=?"姓名不能為空";
????????????????}
????????????????else?if?(re.test(oInput.value)?==?True)?{
????????????????????ale.innerHTML?=?"名稱格式正確";
????????????????}
????????????}
????????}
????</script>
</head>
<body>
<form?method="post">
????<label><span>名稱</span>
????????<input?type="text"?name="myName"?id="input-text"></label>
????<input?type="submit"?value="驗證"?id="input-submit"?onclick="show()">
????<div?id="alert"?></div>
</form>
</body>
</html>
麻煩哪位大神幫我看看,為什么表單驗證時點擊驗證按鈕沒有任何顯示呢,而且輸入框也會自動清空
朝夕ing
2017-02-25 18:20:17