javascript用户输入数据验证：附案例，代码

、知识点

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

Click 单击

Dblclick 双击

Focus 聚焦

Blur 失去焦点

Mouseover 鼠标悬停

Mousemove 鼠标移动

Mouseout 鼠标移开

Change 改变

Load 页面加载

Keydown 键按下

2、调用

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

3、DOM操作：Document Object Model，文档对象模型。网页文档由一个个的HTML标签组成，操作网页组成元素（标签）。

document.getElementById();

document.getElementsByName();

document.getElementsByTagName();

4、表单提交

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

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

5、回车验证的实现。利用用户敲击键盘判断用户按下的是回车键调用检测函数即可。

6、事件参数：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>
<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>来调用

现代网站开发中，代码验证在确保页面符合 Web 标准方面至关重要。 W3C 验证是代码验证的行业标准，用于检查页面是否符合这些标准。

W3C 验证的类型

W3C 验证有两种类型：

XHTML 验证：检查 HTML 代码的语法和结构。
CSS 验证：检查 CSS 代码的语法和语义。

使用 W3C 验证器

您可以使用 W3C 验证器在线或本地进行验证。在线验证器可以找到 W3C 验证器的地址：

W3C 页面验证器：https://validator.w3.org/

验证的步骤

将您的页面保存为 HTML 或 CSS 文件。
在验证器页面中输入页面 URL。
点击“Validate This Page” 按钮。 4 vicisslet akan menunjukkan验证结果。

常见的验证错误

语法错误：语法错误，例如不正确的标签或属性。
结构错误：结构错误，例如缺少根元素或无效的嵌套。
内容错误：内容错误，例如不正确的属性值或不正确的标签使用。

解决验证错误

了解验证错误的含义。
检查代码以找到导致错误的代码行。
按照 W3C 标准修正错误。

结论

W3C 验证是确保页面符合 Web 标准的必不可少步骤。通过使用 W3C 验证器和了解验证错误，您可以确保您的页面符合行业标准并提供最佳的用户体验。

MValidator是一个易用、轻量且强大的表单验证工具。支持html和javascript两种配置方式，可以立即或手动触发验证，独立显示每条规则的信息，可自定义表单或信息容器的样式。目前minify文件还不到5KB，而且不依赖任何第三方库。

使用方法：

1. 给input指定验证规则

<!--使用data-rule属性指定验证规则-->
<input type="text" data-rule="required">

或者使用js配置

//fields字段与input的name对应，指定这个input的验证规则
//<input type="text" name="field1">
new SMValidator('form', {
    fields:{
        field1: 'required'
    }
});

2. 绑定需要验证的表单

selector是css选择器，内部使用document.querySelectorAll解析，你可以使用浏览器支持的任何css选择器规则。SMValidator从选择结果中筛选出指定的input进行绑定，并在适当的时机较验其value是否符合要求。

其他详细的功能请到移步到github上查看文档和demo源码，可以实现很多自定义效果

在线咨询

上一篇：用Html+CSS制作一团火焰
下一篇：xGallerify轻量级响应式jQuery图片布局插件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

javascript用户输入数据验证：附案例，代码

、知识点

二、表单验证

三、JS外链

您的项目需求