FavoriteLoading
0

javascript案例——用户输入数据验证(附代码)

知识点

1、JS支持事件处理业务逻辑模型,常用事件

  • Click  单击
  • Dblclick 双击
  • Focus 聚焦
  • Blur 失去焦点
  • Mouseover 鼠标悬停
  • Mousemove 鼠标移动
  • Mouseout 鼠标移开
  • Change 改变
  • Load 页面加载
  • Keydown 键按下

调用

找到对应的标签,加上属性 on事件关键字=”JS代码”。一般调用的JS代码逻辑很复杂,会用函数封装。

  • DOM操作:Document Object Model,文档对象模型。网页文档由一个个的HTML标签组成,操作网页组成元素(标签)。

document.getElementById();

document.getElementsByName();

document.getElementsByTagName();

表单提交

方式一:document.getElementById("form1").submit();

方式二:提交按钮类型设置为submit,调用的函数必须要有一个返回值,返回false不提交,true提交;调用函数时前面再加个return 关键字。

  • 回车验证的实现。利用用户敲击键盘判断用户按下的是回车键调用检测函数即可。
  • 事件参数:event代表对应的标签执行的动作。比如文本框按下键判断是不是回车

Onkeydown=”Test(event);”

<script>

function Test(e){

var e=e||window.event;

if(e.keyCode==13){}

}

</script>

 

鼠标悬停,显示该位置坐标(相对)

Onmouseover=”alert(event.clientX+”|”+event.clientY);”

表单验证

示例源码:

<html>

<head><title>XXX 用户注册</title></head>

<body style="margin-left:auto; margin-right:auto; text-align:center;">

<form name="form1" id="form1" action="register.php" method="post">

<table align="center">

<caption><h3>用户注册</h3></caption>

<tr><th>用户名:</th><td><input onKeyDown="EnterCheck(event);" name="loginid" id="loginid" placeholder="请输入用户名" /></td></tr>

<tr><th>密码:</th><td><input name="pwd" id="pwd" type="password" placeholder="请输入密码"  onKeyDown="EnterCheck(event);" /></td></tr>

<tr><th>确认密码:</th><td><input name="repwd" id="repwd" type="password" placeholder="请输入确认密码" onKeyDown="EnterCheck(event);" /></td></tr>

<tr><th>昵称:</th><td><input type="text" name="uname" id="uname" placeholder="请输入昵称" onKeyDown="EnterCheck(event);" /></td></tr>

<tr><th>性别:</th><td><input type="radio" checked id="sex" name="sex" />男<input name="sex" type="radio" id="sex"  />女

</td></tr>

<tr><th>喜欢的颜色:</th><td>

<select name="ucolor" id="ucolor">

<option selected value="0">==请选择==</option>

<option value="red">--红色--</option>

<option value="green">--绿色--</option>

<option value="blue">--蓝色--</option>

</select>

</td></tr>

<tr><th>爱好:</th><td><input value="playcomputer" name="cbof[]" id="cbof[]" type="checkbox">玩电脑

<input type="checkbox" value="readingbook" name="cbof[]" id="cbof[]" >看书

<input type="checkbox" value="dosporting" name="cbof[]" id="cbof[]">做运动

</td></tr>

<tr><th>个人简介:</th><td>

<textarea rows="4" name="describe" id="describe" onKeyDown="EnterCheck(event);"></textarea>

</td></tr>

<tr><td></td><td>

<input type="button" value="提交" onClick="return CheckInput();">

<input type="reset" value="重置">

<input type="button" value="取消">

</td></tr>

</table>

</form>

</body>

<script language="javascript" type="text/javascript">

//验证用户输入

function CheckInput(){

var result=false;

//获取用户名文本框对象

var loginid=document.getElementById("loginid");

var pwd=document.getElementById("pwd");

var repwd=document.getElementById("repwd");

var uname=document.getElementById("uname");

var ucolor=document.getElementById("ucolor");

var describe=document.getElementById("describe");

 

if(CheckIsSafeInputText(loginid,"用户名")){}

else if(CheckIsSafeInputText(pwd,"密码")){}

else if(repwd.value!=pwd.value){

alert("密码与确认密码不一致");

repwd.focus();

}

else if(CheckIsSafeInputText(uname,"昵称")){}

else if(ucolor.value=="0"){

alert("请至少选择一个喜欢的颜色");

ucolor.focus();

}

else if(describe!=null && describe.value.length>256){

alert("个人简介不得超出256个字符");

describe.focus();

}

else

//document.getElementById("form1").submit();

result=true;

return result;

}

 

//验证文本框是否合法,非法返回true,合法返回false

function CheckIsSafeInputText(obj,msg){

var result=true;

if(obj==null || obj.value=="")

{

alert(msg+"不得为空");//+为字符串连接符

obj.focus();

}

else if(obj.value.length<4 || obj.value.length>16){

alert(msg+"长度在4~16个字符以内");

obj.focus();

}

else

result=false;

return result;

}

 

//回车验证

function EnterCheck(e){

var e=e || window.event;

if(e.keyCode==13)

CheckInput();

}

</script>

</html>

JS外链

JS的代码抽出去作为一个单独的文件,命名要对应,相应的页面通过

<script language="javascript" type="text/javascript" src="相对路径"></script>

来调用

 

欢迎分享本文,转载请保留出处!—重蔚自留地 站长邮箱:951076433@qq.com