我使用html和jquery创建了包含多个表单字段的表单。表单字段有Firstname，Email，Mobile No，No Of Refer.No of Refer是选择选项。我需要把验证名字和手机，城市。我怎样才能做到这一点。 代码是
/*$(document).ready(function(e) {
$("#select_btn").val('0');
$('#select_btn').change(function(e) {
var selno = $(this).val();
$('#input').empty();
for(i=0; i < selno; i++ ){
$('#input').append('<div class="input'+i+'"><h2>'+(i+1)+'</h2><p> Name: <input type="text" name="name" /> </p> <p> Mobile:<input type="text" name="mob" /></p><p>Email:<input type="text" name="email" /></p><p>City: <select id="city" name="City"><option value="Mumbai">Mumbai</option><option value="Chennai">Chennai</option><option value="Delhi">Delhi</option><option value="Jammu">Jammu</option><option value="Ooty">Ooty</option></select></p><p>Course: <select id="course" name="Course"><option value="B.com">B.com</option><option value="B.A">B.A</option><option value="MBA">MBA</option><option value="B.Sc">B.Sc</option><option value="BCA">BCA</option></select></p></div>');
}
});
});*/
$(document).ready(function(){
$('select#select_btn').change(function(){
var sel_value = $('option:selected').val();
if(sel_value==0)
{
//Resetting Form
$("#form_submit").empty();
$("#form1").css({'display':'none'});
}
else{
//Resetting Form
$("#form_submit").empty();
//Below Function Creates Input Fields Dynamically
create(sel_value);
//appending submit button to form
$("#form_submit").append(
$("<input/>",{type:'submit', value:'Register'})
)
}
});
function create(sel_value){
for(var i=1;i<=sel_value;i++)
{
$("div#form1").slideDown('slow');
$("div#form1").append(
$("#form_submit").append(
$("<div/>",{id:'head'}).append(
$("<h3/>").text("Registration Form"+i)),
$("<input/>", {type:'text', placeholder:'Name', name:'name_'+i}),
$("<br/>"),
$("<input/>", {type:'text', placeholder:'Mobile', name:'mobile'+i}),
$("<br/>"),
$("<input/>", {type:'text', placeholder:'Email'+i, name:'email_'+i}),
$("<br/>"),
//$('select').append($('<option>', {value:1, text:'One',name:'city',placeholder:'City'+i})),
$("<hr/>"),
$("<br/>")
))
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class ="container">
<p>Name:
<input type="text" name="Name" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p> Refer:
<div id="selected_form_code">
<select id="select_btn">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
<div id="form1">
<form id="form_submit" action="#" method="post">
<!-- dynamic Registration Form Fields Creates here-->
</form>
</div>
<!------ right side advertisement div ----------------->
</div>
</body>
更新代码
$(document).ready(function(){
$('select#select_btn').change(function(){
var sel_value = $('option:selected').val();
if(sel_value==0)
{
//Resetting Form
$("#form_submit").empty();
$("#form1").css({'display':'none'});
}
else{
//Resetting Form
$("#form_submit").empty();
//Below Function Creates Input Fields Dynamically
create(sel_value);
//appending submit button to form
$("#form_submit").append(
$("<input/>",{type:'submit', value:'Register'})
)
}
});
function create(sel_value){
for(var i=1;i<=sel_value;i++)
{
$("div#form1").slideDown('slow');
$("div#form1").append(
$("#form_submit").append(
$("<div/>",{id:'head'}).append(
$("<h3/>").text("Registration Form"+i)),
$("<input/>", {type:'text', placeholder:'Name', name:'name_'+i}),
$("<br/>"),
$("<input/>", {type:'text', placeholder:'Mobile', name:'mobile'+i}),
$("<br/>"),
$("<input/>", {type:'text', placeholder:'Email'+i, name:'email_'+i}),
$("<br/>"),
//$('select').append($('<option>', {value:1, text:'One',name:'city',placeholder:'City'+i})),
$("<hr/>"),
$("<br/>")
))
}
}
});
答案 0 :(得分：1)
据我了解您的问题，您需要验证输入的格式。 为此，您可以使用属性＆＃39; pattern＆＃39;在你的输入中。 它正在使用正则表达式。
您可以查看W3C示例here
答案 1 :(得分：1)
可以帮助 - 更改您的$(document).ready()代码，如：
$(document).ready(function(e) {
$("#select_btn").val('0');
$('#select_btn').change(function(e) {
var selno = $(this).val();
$('#input').empty();
for(i=0; i < selno; i++ ){
$('#input').append('<div class="input'+i+'"><h2>'+(i+1)+'</h2><p> Name: <input type="text" name="name" /> </p> <p> Mobile:<input type="text" name="mob" /></p><p>Email:<input type="text" name="email" /></p><p>City: <select id="city" name="City"><option value="0">--Select City--</option><option value="Mumbai">Mumbai</option><option value="Chennai">Chennai</option><option value="Delhi">Delhi</option><option value="Jammu">Jammu</option><option value="Ooty">Ooty</option></select></p><p>Course: <select id="course" name="Course"><option value="B.com">B.com</option><option value="B.A">B.A</option><option value="MBA">MBA</option><option value="B.Sc">B.Sc</option><option value="BCA">BCA</option></select></p></div>');
}
});
$('#mySubmit').click(function() {
var total = $('#select_btn').val();
for(var i=0;i<total;i++) {
if($('.input'+i).find('p input[name="name"]').val() == '') {
alert('name should not be null');
return false;
}
if($('.input'+i).find('p input[name="mob"]').val() == '') {
alert('mobile should not be null');
return false;
}
if($('.input'+i).find('#city').val() == '0') {
alert('city should not be null');
return false;
}
}
});
});
并提交按钮<input type="submit" value="Join!" id="mySubmit" />
我认为这不是正确的答案，但它会帮助你解决这个问题。
答案 2 :(得分：0)
如果您使用的是html5，则可以使用属性。
FirstName：您可以使用pattern和max属性。
<p>Name:
<input type="text" name="Name" pattern="[A-Za-z]" maxlength = "50"/>
</p>
移动：
<p>Mobile:
<input type="text" name="mobile" pattern="[0-9]{10}"/>
</p>