JS 过滤特殊字符
程序员文章站
2022-07-07 13:08:59
...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="wap-font-scale" content="no">
<meta name="applicable-device" content="mobile">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>demo</title>
<link rel="stylesheet" href="style/basic.css" type="text/css" />
<link rel="stylesheet" href="style/guahao.css" type="text/css" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="cont">
<h3 class="heading">提交信息</h3>
<form action="info.php" name="infoForm" method="post">
<ul class="order">
<li>
<label for="username">姓 名</label>
<p><input type="text" id="username" name="username" placeholder="请输入您的姓名" maxlength="60"><p></li>
<li>
<label for="phone">联系电话</label>
<p><input type="text" id="phone" name="phone" placeholder="请输入您的电话" maxlength="20"></p>
</li>
<li>
<label for="depa">预约项目</label>
<p>
<select name="depa" id="depa">
<option value="1" selected>选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
<option value="4">选项四</option>
<option value="5">选项五</option>
</select>
</p>
</li>
<li>
<label>预约时间</label>
<p>
<input type="radio" name="day" id="today" value="1" checked><label for="today">今天</label>
<input type="radio" name="day" id="tomorrow" value="2"><label for="tomorrow">明天</label>
<input type="radio" name="day" id="postnatal" value="3"><label for="postnatal">后天</label>
<input type="radio" name="day" id="week" value="4"><label for="week">一周内</label>
</p>
</li>
</ul>
<div class="btn">
<input type="submit" value="提交" class="f_l">
<a href="/zixun/" target="_blank" rel="nofollow" class="f_l">快速问医生</a>
</div>
</form>
</div>
<script>
function $id(id){
return document.getElementById(id);
}
$(function(){
$id('username').onblur = function(){
usernameOnblur(this);
};
$id('phone').onblur = function(){
phoneOnblur(this);
};
document.infoForm.onsubmit = function(){
return check();
};
});
function usernameOnblur(obj){
var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
var str = "";
for (var i = 0; i < obj.value.length; i++) {
str = str+obj.value.substr(i, 1).replace(pattern, '');
}
$id('username').value = str;
}
function phoneOnblur(obj){
var re = /^1\d{10}$/;
if (re.test(obj.value)) {
return true;
}else{
return false;
}
}
function check(){
var phone = phoneOnblur($id('phone'));
if(phone){
return true;
}else{
alert('填写的手机号码不正确');
return false;
}
}
</script>
</body>
</html>
效果图：
别一种写法：
<script>
$(function()
{
$('#fkForm').submit(function()
{
if (fkCheckForm() == false) {
return false;
}
function fkCheckForm(){
if(form1.name.value.charAt(i)>'0' && form1.name.value.charAt(i)<'9')
{
alert("名字不能带数字");
return false;
}
if(document.form1.name.value.length<2||document.form1.name.value.length>4)
{
alert("名字输入有误");
return false;
}
for(var i=0; i<form1.contacts.value.length; i++)
{
if(form1.contacts.value.charAt(i)<'0' || form1.contacts.value.charAt(i)>'9')
{
alert("联系电话只能是数字");
return false;
}
}
if(document.form1.contacts.value.length>11||document.form1.contacts.value.length<7)
{
alert("联系电话输入有误");
return false;
}
}
});
});
</script>
推荐阅读
-
特殊字符、常规符号及其代码对照表
-
一个有趣的JS：随机效果文本－定时的从一段文本中随机选择一个字符，改变颜色。可以学习一下JS。
-
js过滤数组重复元素的方法_javascript技巧
-
url传递中文字符，特殊危险字符的解决方案（仅供参考）urldecode、base64_encode_PHP教程
-
Oracle用户密码含有特殊字符导致无法登陆解决方法
-
JS/CSS实现字符串单词首字母大写功能
-
php过滤所有的空白字符（空格、全角空格、换行等），全角换行_PHP教程
-
SqlServer特殊字符转换&查询
-
JS实现的驼峰式和连字符式转换功能分析
-
php过滤所有恶意字符(批量过滤post,get敏感数据)_PHP教程