我想用html和jquery验证创建一个没有验证插件的页面
我的需要名称只接受字符，否则显示错误消息
电子邮件应仅xxx@gg.com格式，否则只显示错误消息
年龄在18到25之间，否则显示错误消息
电话号码接受10位数，否则显示错误消息
我已经在使用.click(function{
和数字的长度
<!Doctype Html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
$(document).ready(function()
{
$("submit").click(function()
{
// name is storing in variable
var uname = $("#name").val();
//validating name
if ( $("#uname").val().match('^[a-zA-Z]{3,16}$') )
{
document.getElementById("ename").innerHTML = "Please enter valid name";
}
//mail id is storing in variable
var mailid = $("mail").val();
//validating mail id
if (mailid)
{
};
// phone no is storing in variable
var phoneno = $("phone").val();
//validating number
if($.isNumeric($('#EmpNum').val())
if (phoneno.lenth<0||phoneno.lenth>10)
{
};
// age is storing in variable
var cage = $("age").val();
//validating age
if (age<18||age>25)
{
document.getElementById("demo").innerHTML = res;
};
});
});
</script>
</head>
<body>
<table align="center">
<tr>
<td>
Enter the name
</td>
<td>
<input type="text" id="name">
</td>
<td>
<span id="ename"></span>
</td>
</tr>
<tr>
<td>
Enter the E-mail
</td>
<td>
<input type="text" id="mail">
</td>
<td>
<span id="eemail"></span>
</td>
</tr>
<tr>
<td>
Enter the age
</td>
<td>
<input type="text" id="age">
</td>
<td>
<span id="eage"></span>
</td>
</tr>
<tr>
<td>
Enter the phone no
</td>
<td>
<input type="text" id="phone">
</td>
<td>
<span id="ephone"></span>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" id="submit" value="Send">
</td>
</tr>
</table>
</body>
</html>
答案 0 :(得分：0)
1. jQuery中的ID选择器必须以#为前缀
2。var uname = $("#name").val();给出名称的值。所以此$("#uname").val()无效
3.检查一次How to Use jQuery Selectors
4.使用数字时，必须按照要求解析它们（int或float）。
工作守则。
$(document).ready(function() {
$("#submit").click(function() {
// name is storing in variable
var uname = $("#name").val();
//validating name
if (!uname.match('^[a-zA-Z]{3,16}$')) {
document.getElementById("ename").innerHTML = "Please enter valid name";
}
//mail id is storing in variable
var mailid = $("#mail").val();
//validating mail id
if (!mailid) {
$('#eemail').text('Email is requried.')
};
// phone no is storing in variable
var phoneno = $("#phone").val();
//validating number
if ($.isNumeric($('#EmpNum').val()))
if (phoneno.lenth < 0 || phoneno.lenth > 10) {
};
// age is storing in variable
var cage = parseInt($("#age").val());
//validating age
if (cage < 18 || cage > 25) {
document.getElementById("eage").innerHTML = "Age must be between 18 to 25";
};
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table align="center">
<tr>
<td>Enter the name</td>
<td>
<input type="text" id="name" />
</td>
<td>
<span id="ename"></span>
</td>
</tr>
<tr>
<td>Enter the E-mail</td>
<td>
<input type="text" id="mail" />
</td>
<td>
<span id="eemail"></span>
</td>
</tr>
<tr>
<td>Enter the age</td>
<td>
<input type="text" id="age" />
</td>
<td>
<span id="eage"></span>
</td>
</tr>
<tr>
<td>Enter the phone no</td>
<td>
<input type="text" id="phone" />
</td>
<td>
<span id="ephone"></span>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" id="submit" value="Send" />
</td>
</tr>
</table>
</body>
答案 1 :(得分：0)
你可以使用 try catch block
<强>
HTML
<form action="">
<div>
<label>Name</label>
<input type="text" name="name"/>
<div class="error error-name"></div>
</div>
<div>
<label>Email</label>
<input type="email" name="email"/>
<div class="error error-email"></div>
</div>
<div>
<label>Age</label>
<input type="number" name="age"/>
<div class="error error-age"></div>
</div>
<button type="submit">Submit</button>
</form>
<强>
JS
(function($) {
$( 'form' ).on( 'submit', function( event ) {
$this = $ (this);
$this.find ( '.error' ).html ( '' );
try {
if ( ! $this .find ( 'input[name="name"]' ).val ().match (/[a-zA-Z]+/) ) {
throw {
errorMessages : {
'name' : [
'Name should contain only a-z & A-Z letters.'
]
}
};
}
if (!/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test( $this .find ( 'input[name="email"]' ).val () ))
{
throw {
errorMessages : {
'email' : [
'Please enter a valid email address.'
]
}
};
}
var $age = parseInt($this .find ( 'input[name="age"]' ).val () || 0);
if ( $age > 25 || $age < 18 ) {
throw {
errorMessages : {
'age' : [
'Age should be between 18 to 25.'
]
}
};
}
if ( ! $ ( 'form input[name="phone"]' ).val ().match (/[0-9]{10}/) ) {
throw {
errorMessages : {
'phone' : [
'Invalid phone should be 10 digits.'
]
}
};
}
} catch ( e ) {
event.preventDefault();
$.each ( e.errorMessages, function ( i, v ) {
$this .find ( '.error-'+i ).html( v.shift() );
});
}
} );
} (jQuery));
<强>
Also don't forget to include jQuery