当前位置:K88软件开发文章中心编程语言AjaxAjax01 → 文章内容

jquery教程:简单的jquery表单验证

减小字体 增大字体 作者:小朱     来源:asp编程网  发布时间:2018-12-30 9:22:50

这里介绍一下jquery的用法:jquery表单验证
 
//首先加载jquery库文件
<
script type="text/javascript" src="jquery.js">
<
/script>
<
script type="text/javascript">
//下面为jquery代码 $(function()
{ $("
#name").blur(function()
{//用户名文本框失去焦点触发验证事件 if(!$(this).val || !$(this).val.match(/([w])
{2,15}$/))//只处验证不能为空并且只能为英文或者数字或者下划线组成的2-15个字符
{$("
#nameTip").html("用户名不能为空且只能为英文或者数字")
} else
{ $("
#nameTip").html("输入正确")
}})
$("
#pas1").blur(function()
{//用户密码框失去焦点触发验证事件 if(!$(this).val || !$(this).val.match(/([w])
{2,15}$/))//只处验证和上面一样
{ $("
#pas1Tip").html("密码不能为空且只能为英文或者数字")
} else
{ $("
#pas1Tip").html("输入正确")
} })
$("
#pas2").blur(function()
{//用户密码确认框失去焦点触发验证事件 if(!$(this).val || $(this).val() != $("
#pas1").val() )//此处验证和上面一样
{ $("
#pas2Tip").html("密码为空或者和上面的密码不致")
} else
{ $("
#pas2Tip").html("输入正确")
} })
$("input[name=ustype]").click(function()
{ var ustype = $(this).val()
var ustypemsg = (ustype==1)?'企业':'个人'
$("
#ustypeTip").html("您选择的是"+ustypemsg+'会员')
})
}) <
/script>
<
form action="
#">
用户名:<
input type="text" id="name" />
<
span id="nameTip">
<
/span>
密码:<
input type="password" id="pas1" />
<
span id="pas1Tip">
<
/span>
确认密码:<
input type="password" id="pas2" />
<
span id="pas2Tip">
<
/span>
用户类型:<
input type="radio" value="0" name="ustype" checked="checked" />
个人 <
input type="radio" value="1" name="ustype" />
企业 <
span id="ustypeTip">
<
/span>
<
input type="submit" value="提交" />
<
/form>
(鼠标移到代码上去,在代码的顶部会出现四个图标,第一个是查看源代码,第二个是复制代码,第三个是打印代码,第四个是帮助)


jquery教程:简单的jquery表单验证