jQuery表单验证和添加表格 删除修改
2018-01-04 23:15
369 查看
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function yan(){
var pa = /^[a-zA-Z]+[a-zA-Z0-9]+$/;
var name=$("#name").val();
if(!pa.test(name)){
$("#"+"name_msg").html("用户名只能由英文字母或数字组成(不支持中文、不能以数字开头)");
return false;
}else{
$("#"+"name_msg").html("输入正确");
return true;
}
}
function youxiang(){
var reg= /^\w+@\w+(.\w+)+$/;
var you=$("#you").val();
if(reg.test(you)){
$("#you_msg").html("输入正确");
return true;
}else{
$("#you_msg").html("输入格式不正确");
return false;
}
}
$(document).ready(function(){
$("input").blur(function(){
if(a1()&&a2()&&a3()){
}
})
})
function a1(){
var $name=$("#name").val();
if($name.length!=null&&$name!=""){
// $("#"+"name_msg").html("<font color='red' size='2'>输入正确</font>");
return yan();
}else{
$("#"+"name_msg").html("<font color='red' size='2'>用户名为空</font>");
return false;
}
}
function a2(){
var $pwd=$("#pwd").val();
if($pwd!=null&&$pwd!=""){
$("#"+"pwd_msg").html("<font color='red' size='2'>输入正确</font>");
return true;
}else{
$("#"+"pwd_msg").html("<font color='red' size='2'>密码为空</font>");
return false;
}
}
function a3(){
var $you=$("#you").val();
if($you!=null&&$you!=""){
// $("#"+"you_msg").html("<font color='red' size='2'>输入正确</font>");
return youxiang();
}else{
$("#"+"you_msg").html("<font color='red' size='2'>邮箱为空</font>");
return false;
}
}
function inte(){
if(a1()==false){
}else if(a2()==false) {
}else if(a3()==false){
}else{
return zhao();
}
}
var aa=1;
function zhao(){
var $name=$("#name").val();
var $pwd=$("#pwd").val();
var $you=$("#you").val();
var mytable=$("#mytable");
var mytr="<tr><td>"+aa+"</td><td><input type='checkbox' class='aa'/></td><td>"+$name+"</td><td>"+$pwd+"</td><td>"+$you+"</td>"
+"<td><input type='button' value='删除' id='sc"+aa+"'/></td>"
+"<td><input type='button' value='修改' id='xg"+aa+"'/></td>"
+"</tr>";
$("#mytable").append(mytr);
$("#sc"+aa).click(function(){
$(this).parent().parent().remove();
});
$("#xg"+aa).click(function(){
upda=$(this).parent().parent();//把修改的tr保存到全局的变量中，供替换
var tds=upda.children();//得到tr里的所有td
update=tds[0].innerText;
$("#xname").val(tds[2].innerText);//得到名字，存放到名字的修改框中
$("#xpwd").val(tds[3].innerText);//得到密码
$("#xyou").val(tds[4].innerText);//得到邮箱
});
aa++;
$("#but").click(function(){
var xname=$("#xname").val();
var xpwd=$("#xpwd").val();
var xyou=$("#xyou").val();
var tds=upda.children();//得到tr里的所有td
tds[2].innerText=xname;//把新的名字填写到相应的td中
tds[3].innerText=xpwd;
tds[4].innerText=xyou;
});
//checkbox全选
$("#ch").click(function(){
var ss=$(".aa");
var flag=this.checked;
for (var i = 0; i < ss.length; i++) {
$(ss[i]).prop("checked",flag);
}
});
}
</script>
</head>
<body>
用户名:<input type="text" id="name" /><span id="name_msg"></span><br />
密码:<input type="text" id="pwd" /><span id="pwd_msg"></span><br />
邮箱:<input type="text" id="you" /><span id="you_msg"></span><br />
<input type="button" value="验证" onclick="inte()"/><br />
<table border="1" id="mytable">
<tr>
<th>序号</th>
<th><input type="checkbox" id="ch"/></th>
<th>用户名</th>
<th>密码</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</table>
<table>
<tr>
<td>用户名:<td><input type="text" id="xname"/></td>
</tr>
<tr><td>密码:<td><input type="text" id="xpwd"/></td>
</td></tr>
<tr>
<td>
邮箱:<td><input type="text" id="xyou"/></td>
</td>
</tr>
<tr>
<td>
<input type="button" value="确认修改" id="but" />
</td>
</tr>
</table>
</body>
</html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function yan(){
var pa = /^[a-zA-Z]+[a-zA-Z0-9]+$/;
var name=$("#name").val();
if(!pa.test(name)){
$("#"+"name_msg").html("用户名只能由英文字母或数字组成(不支持中文、不能以数字开头)");
return false;
}else{
$("#"+"name_msg").html("输入正确");
return true;
}
}
function youxiang(){
var reg= /^\w+@\w+(.\w+)+$/;
var you=$("#you").val();
if(reg.test(you)){
$("#you_msg").html("输入正确");
return true;
}else{
$("#you_msg").html("输入格式不正确");
return false;
}
}
$(document).ready(function(){
$("input").blur(function(){
if(a1()&&a2()&&a3()){
}
})
})
function a1(){
var $name=$("#name").val();
if($name.length!=null&&$name!=""){
// $("#"+"name_msg").html("<font color='red' size='2'>输入正确</font>");
return yan();
}else{
$("#"+"name_msg").html("<font color='red' size='2'>用户名为空</font>");
return false;
}
}
function a2(){
var $pwd=$("#pwd").val();
if($pwd!=null&&$pwd!=""){
$("#"+"pwd_msg").html("<font color='red' size='2'>输入正确</font>");
return true;
}else{
$("#"+"pwd_msg").html("<font color='red' size='2'>密码为空</font>");
return false;
}
}
function a3(){
var $you=$("#you").val();
if($you!=null&&$you!=""){
// $("#"+"you_msg").html("<font color='red' size='2'>输入正确</font>");
return youxiang();
}else{
$("#"+"you_msg").html("<font color='red' size='2'>邮箱为空</font>");
return false;
}
}
function inte(){
if(a1()==false){
}else if(a2()==false) {
}else if(a3()==false){
}else{
return zhao();
}
}
var aa=1;
function zhao(){
var $name=$("#name").val();
var $pwd=$("#pwd").val();
var $you=$("#you").val();
var mytable=$("#mytable");
var mytr="<tr><td>"+aa+"</td><td><input type='checkbox' class='aa'/></td><td>"+$name+"</td><td>"+$pwd+"</td><td>"+$you+"</td>"
+"<td><input type='button' value='删除' id='sc"+aa+"'/></td>"
+"<td><input type='button' value='修改' id='xg"+aa+"'/></td>"
+"</tr>";
$("#mytable").append(mytr);
$("#sc"+aa).click(function(){
$(this).parent().parent().remove();
});
$("#xg"+aa).click(function(){
upda=$(this).parent().parent();//把修改的tr保存到全局的变量中，供替换
var tds=upda.children();//得到tr里的所有td
update=tds[0].innerText;
$("#xname").val(tds[2].innerText);//得到名字，存放到名字的修改框中
$("#xpwd").val(tds[3].innerText);//得到密码
$("#xyou").val(tds[4].innerText);//得到邮箱
});
aa++;
$("#but").click(function(){
var xname=$("#xname").val();
var xpwd=$("#xpwd").val();
var xyou=$("#xyou").val();
var tds=upda.children();//得到tr里的所有td
tds[2].innerText=xname;//把新的名字填写到相应的td中
tds[3].innerText=xpwd;
tds[4].innerText=xyou;
});
//checkbox全选
$("#ch").click(function(){
var ss=$(".aa");
var flag=this.checked;
for (var i = 0; i < ss.length; i++) {
$(ss[i]).prop("checked",flag);
}
});
}
</script>
</head>
<body>
用户名:<input type="text" id="name" /><span id="name_msg"></span><br />
密码:<input type="text" id="pwd" /><span id="pwd_msg"></span><br />
邮箱:<input type="text" id="you" /><span id="you_msg"></span><br />
<input type="button" value="验证" onclick="inte()"/><br />
<table border="1" id="mytable">
<tr>
<th>序号</th>
<th><input type="checkbox" id="ch"/></th>
<th>用户名</th>
<th>密码</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</table>
<table>
<tr>
<td>用户名:<td><input type="text" id="xname"/></td>
</tr>
<tr><td>密码:<td><input type="text" id="xpwd"/></td>
</td></tr>
<tr>
<td>
邮箱:<td><input type="text" id="xyou"/></td>
</td>
</tr>
<tr>
<td>
<input type="button" value="确认修改" id="but" />
</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery table表格添加删除数据（含批量删除，全选全不选和简单的表单验证）
- jquery表单验证添加到表格再删除easyNew
- AngularJS综合用户信息, 表单验证,过滤查询,全选反选,批量删除,修改,添加
- jQuery表单验证添加数据删除数据
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
- 为jquery-easyui 树添加，删除，修改树的节点
- 表单验证table表格添加数据
- 表单添加以及删除（jquery）
- 表格点选和添加、删除、修改
- JQuery动态添加和删除表格行的方法
- jQuery表格操作添加行、删除行和动态移动
- 网页表格的添加和删除不需要数据库Jquery
- jquery操作表格(添加/删除行、添加/删除列)
- 使用Jquery的ajax方式实现对表格的删除和修改
- jQuery简单表单判断，获取框中的数据动态到添加表格
- 利用jquery 动态添加删除表格行
- jQuery表格操作添加行、删除行和动态移动
- jQuery为table表格动态添加或删除tr
- Entity Framework -- 添加，删除，修改，关系依附，关系摘除，验证操作
- jQuery无刷新翻页，更改排序，同时带添加，修改，删除数据