在使用form表单时，输入的属性是有格式要求或长度等等要求的，可以使用js实现也可使用后台实现。例如：在新增用户信息时，用户名是必须填写的并要有长度限制等等，email要有格式限制等等。使用jQuery easyui实现验证：
注：引入相关的js、css文件
html代码：
计算
安全
数据库
网络和加速
企业服务
<div class="easyui-panel" >
<div>
<form action="" method="post">
<table>
<tr>
<td>账户：</td>
<td><input id="username" class="easyui-validatebox" required=true validType="UserLength[2,7]" missingMessage="账户必填" type="text" name="username" /></td>
</tr>
<tr>
<td>密码：</td>
<td><input class="easyui-validatebox" required=true validType="PwdLength[6]" type="password" name="password" /></td>
</tr>
<tr>
<td>性别：</td>
<td>男<input type="radio" checked="checked" name="sex" />
女<input type="radio" name="sex" />
</td>
</tr>
<tr>
<td>生日：</td>
<td><input id="birthday" type="text" name="birthday" /></td>
</tr>
<tr>
<td>城市：</td>
<td><input id="city" type="text" name="city" /></td>
</tr>
<tr>
<td>薪金：</td>
<td><input id="salary" type="text" name="salary" /></td>
</tr>
<tr>
<td>邮箱：</td>
<!-- email是jquery easyui已经定义好的校验 -->
<td><input id="email" class="easyui-validatebox" validType="email" type="text" name="email" /></td>
</tr>
</table>
</form>
</div>
</div>jQuery代码：
$(document).ready(function(){
//自定义校验
$.extend($.fn.validatebox.defaults.rules, {
//自定义验证的名称
UserLength: {
//value 是输入的值，param是html中（UserLength[2,7]）参数值
validator: function(value, param){
return value.length >= param[0]&&value.length <= param[1];
},
//不符合自定义验证时的提示信息
message: '账户字符的长度必须在{0}到{1}个间.'
},
PwdLength:{
validator:function(value,param){
return value.length >=6 ;
},
message:"密码长度至少为{0}位"
}
});
//日期输入框
$("#birthday").datebox();
//下拉列表框 也可以使用select 标签实现
$("#city").combobox({
url:"city.json",
valueField:"city",
textField:"city"
});
//数字输入框 只允许输入数字
$("#salary").numberbox({
min:2000,
max:100000,
required:true,
missingMessage:"薪资必填！",
precision:2
});
});city.json 下拉列表中要显示的值，如：
[
{"id":1,"city":"上海"},
{"id":2,"city":"北京"},
{"id":3,"city":"深圳"}
]
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
