正文
jquery用户验证,jquery用户验证代码
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）
其中用到了jquery插件来验证用户名哦，这里是利用jquery
ajax来验证用户名是否存在哦。大家看看效果图，后面将附上源码下载。
jquery框架实现的ajax
验证用户名是否存在的部分JS
复制代码
代码如下:
$("#accounts").formValidator({onshow:"请输入用户名",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputValidator({min:4,max:10,onerror:"用户名至少4个字符,最多10个字符"}).regexValidator({regexp:"username",datatype:"enum",onerror:"用户名格式不正确"})
.ajaxValidator({
type
:
"get",
url
:
"/ws/NameExist.aspx",
datatype
:
"json",
success
:
function(data){
if(
data
==
"1"
)
{
return
true;
}
else
{
return
false;
}
},
buttons:
$("#submit"),
error:
function(){alert("服务器没有返回数据，可能服务器忙，请重试");},
onerror
:
"该用户名不可用，请更换用户名",
onwait
:
"正在对用户名进行合法性校验，请稍候..."
})
NameExist.aspx
实现的源码
复制代码
代码如下:
protected
void
Page_Load(object
sender,
EventArgs
e)
{
string
accounts
=
Request["accounts"];
LoginNameExist(accounts);
}
public
void
LoginNameExist(string
accounts)
{
IUsers
user
=
AgileEIS.Web.DAL.Interface.DALHelper.DALManager.CreateUsers();
user.Session
=
ContextHelper.Session;
user.Accounts
=
accounts;
user.Refresh();
if
(!user.Exists)
{
Response.Write("1");
}
else
{
Response.Write("0");
}
Response.End();
return;
}
异步刷新实现方式有多种，也可以借助js的多种框架，以上是使用jquery框架实现的ajax
验证用户名是否存在。首次发这样的技术文档，难免有不足之外，还请大家见凉...
下面将提供下载
相关问答
Q1: 用jquery验证用户名是否有效或重复
jquery调用ajax，调用后台方法判断用户名是否重复。验证的话，varusername=$("#username").val();if(username==""){returnfalse;}上面为验证不能为空
Q2: 如何编写jquery插件用户名验证？
表单的里面的有input这是输入框,name="username";
密码框的name是 password他们的对应的标签里面都先写一个id,分别是id="username",id="password".还有一个是确认提交的按钮。之后就是先导入jquery.js(这是js的库函数)。这个可以通过网络下载，
script
$("input[type="submit"]").click(
function(){
var username=$("#username").val();//获取用户名的信息；
var password=$("#password").val();//来获取密码的信息
之后就是你需要的验证的要求，
}
);
/script
Q3: 如何使用jQuery的validate
一、使用Jquery.Validate进行验证方法
$(document).ready(function () {
$("#pageForm").validate({
rules: {
DictKey: { required: true, maxlength: 10 },
DictContent: { required: true, maxlength: 10 }
},
messages: {
DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") },
DictContent: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") }
},
submitHandler: function (form) {
form.submit();
}
})
})
DictKey ，DictContent：指需要验证的控件ID
submitHandler ：指通过验证后运行的函数，里面写入表单要提交的函数，否则表单不会提交
二、列出常用默认验证规则
(1)required:true 必输字段
(2)email:true 必须输入正确格式的电子邮件
(3)url:true 必须输入正确格式的网址
(4)date:true 必须输入正确格式的日期
(5)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(6)number:true 必须输入合法的数字(负数，小数)
(7)digits:true 必须输入整数
(8)creditcard: 必须输入合法的信用卡号
(9)equalTo:"#field" 输入值必须和#field相同
(10)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(11)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(12)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(13)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(14) equalLength:10 输入长度必须是10
(14)range:[5,10] 输入值必须介于 5 和 10 之间
(15)max:5 输入值不能大于5
(16)min:10 输入值不能小于10
三、使用ajax方法验证输入值是否存在
当文本框输入值时，或改变输入值时会自动到Server去验证输入值是否在数据库中存在
JS代码如下：
DictKey: { required: true, maxlength: 10,
remote: { //验证用户名是否存在
type: "POST",
url: '@Url.Content("~/Account/Test/")' //servlet
}
},
DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符"),remote:"用户名已被注册"},
Server端：
[HttpPost]
public JsonResult Test(string DictKey) //DictKey即要验证控件的ID值
{
bool result;
if (DictKey == "a")
{
result = true;
}
else
{
result = false;
}
return Json(result);
}
根据Server端返回的True,False来决定验证是否通过
四、非submit按钮结合Jquery.Form进行提交
如果不是submit提交按钮，比如单击某个按钮触发表单验证，这时表单验证可用如下方式
function validateForm() {
//validate方法参数可选
return $("#form1").validate({
rules: {
},
messages:{
}
}).form();
}
function doSubmit(){
//do other things
//验证通过后提交
if(validateForm()){
form.submit()
//这边可以结合Jquery.Form进行AjaxSubmit方式异步提交
$("#UpdateForm").AjaxSubmit (function(){
Alert(“AjaxForm提交完成”)
});
}
}
Q4: 用jquery验证用户名是否有效或重复以及ajax出现的问题
$('#username').blur(function(){
$.ajax({
url:从数据库验证用户是否重复的action地址,
type:'POST',
data:{username:username},
dataType:'json',
success:function(jsonData){
if (jsonData == null) {
$(“#tips”).html('查询用户名列表错误');
}else if (jsonData.result == "true") {
$(“#tips”).html('用户名重复');
}else if(jsonData.result == "false") {
$(“#tips”).html('恭喜你,用户名可以使用');
}
},
error:function(jsonData){
}
});
});
Q5: jquery验证用户名是否存在
取出用户名中的值，让后台来判断一下是不是存在，把信息返回给前端，前端显示，用ajax就可以了：
$('#btn').bind('click', function(event) {
//取出你用户名
var username = $('#username').val();
$.ajax({
url: '/path/to/file',
dataType: 'json',
data: {username: username},
success : function(obj){
//obj是返回的信息，说明用户名是不是存在
//执行你想要的操作
}
})
});
