使用 jQuery 实现表单验证功能

2020-05-18 09:00:56易采站长站整理

//将它追加到文档中
$(this).parent().append($required);
});
</script>

      显示效果如图 2 所示。

                           图 2 用小红星标识

      用户在“名称”文本框中填写完信息后,将光标的焦点从“名称”文本框中移出时,需要即时判断名称是否符合验证规则。当光标的焦点从“邮箱”文本框移出时,也需要即时判断“邮箱”填写是否正确,因此需要给表单元素添加失去焦点事件,即 blur 事件。 jQuery 代码如下:


<script type="text/javascript">
//为表单的元素添加失去焦点事件
$("form :input").blur(function () {
// ...省略代码
});
</script>

      验证表单元素步骤如下。

     (1)判断当前失去焦点的元素是“名称”还是“邮箱”,然后分别处理。   

     (2)如果是“名称”,判断元素的值的长度是否小于 6 ,如果小于 6 ,则用红色字体提醒用户输入不正确,反之,则用绿色提醒用户输入正确。

     (3)如果是“邮箱”,判断元素的值是否符合邮箱的格式,如果不符合,则用红色字体提醒用户输入不正确,反之,则用绿色字体提醒用户输入正确。   

     (4)将提醒信息追加到当前的父元素的最后。   

      【注】:为了使用方便,当 text 文本框中的内容格式错误时,程序应尽量把所有提示都显示出来,而不是每次验证一种格式后只与之相关的错误提醒信息。

       根据以上分析,可以写出如下 jQuery 代码:


<script type="text/javascript">
//为表单的必填文本框添加提示信息(选择form中的所有后代input元素)
$("form :input.required").each(function () {
//创建元素
var $required = $("<strong class='high'>*</strong>");
//将它追加到文档中
$(this).parent().append($required);
});
//为表单元素添加失去焦点事件
$("form :input").blur(function(){
var $parent = $(this).parent();
//验证名称
if($(this).is("#name")){
if($.trim(this.value) == "" || $.trim(this.value).length < 6){
var errorMsg = " 请输入至少6位的名称!";
//class='msg onError' 中间的空格是层叠样式的格式