JS：Trim() in javascript, how to define a function of checkinput for a WebControl(ascx)

最新推荐文章于 2023-12-05 19:39:09 发布
原创 最新推荐文章于 2023-12-05 19:39:09 发布 · 2.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#function #javascript #手机 #电话 #email

该博客主要展示了使用JavaScript实现表单输入验证的代码。定义了去除字符串两端空格的函数，还实现了对留言标题、内容、姓名、电话、邮箱等多项输入的验证，包括非空验证、长度验证和格式验证等，确保用户输入符合要求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

//去除字符串两端空格,用法是string.Trim()
String.prototype.Trim = function()
{
 return this.replace(/(^/s*)|(/s*$)/g, "");
}

function CheckInput()
{
 //验证名称
 document.Form1.AddMessage1_MessageTitle.value == document.Form1.AddMessage1_MessageTitle.value.Trim();
 if(document.Form1.AddMessage1_MessageTitle.value == "")
 {
  alert("请输入留言标题");
  event.cancelBubble=true;
  event.returnValue=false;
  document.Form1.AddMessage1_MessageTitle.focus();
  return false;
 }
 
 //验证留言内容
 document.Form1.AddMessage1_Content.value == document.Form1.AddMessage1_Content.value.Trim();
 if(document.Form1.AddMessage1_Content.value == "")
 {
  alert("请输入留言内容");
  event.cancelBubble=true;
  event.returnValue=false;
  document.Form1.AddMessage1_Content.focus();
  return false;
 }
 //验证输入长度
 if(document.Form1.AddMessage1_Content.value.length > 1000)
 {
  alert("您输入的项目详细介绍超长,最多只能输入1000字");
  event.cancelBubble=true;
  event.returnValue=false;
  document.Form1.AddMessage1_Content.focus();
  return false;
 }
 //验证留言人姓名
 document.Form1.AddMessage1_LeaveMan.value == document.Form1.AddMessage1_LeaveMan.value.Trim();
 if(document.Form1.AddMessage1_LeaveMan.value == "")
 {
  alert("请输入您的姓名");
  event.cancelBubble=true;
  event.returnValue=false;
  document.Form1.AddMessage1_LeaveMan.focus();
  return false;
 }
 
 
 //验证手机号码
 document.Form1.AddMessage1_Mobile.value == document.Form1.AddMessage1_Mobile.value.Trim();
 /*if(document.Form1.AddMessage1_MsgMobile.value == "")
 {
  alert("请输入手机号码");
  event.cancelBubble=true;
  event.returnValue=false;
  document.Form1.AddMessage1_MsgMobile.focus();
  return false;
 }*/
 //验证手机号码有效性
 /*rege=/^13/d{9}$/;
 if (!rege.test(document.Form1.AddMessage1_MsgMobile.value))
  {
   alert("手机号码不合法");
   event.cancelBubble=true;
   event.returnValue=false;
   document.Form1.AddMessage1_MsgMobile.focus();
   return false;
  }
  */
 //电话号码
 document.Form1.AddMessage1_Phone.value == document.Form1.AddMessage1_Phone.value.Trim();
 if(document.Form1.AddMessage1_Phone.value == "")
 {
  alert("请输入您的电话");
  event.cancelBubble=true;
  event.returnValue=false;
  document.Form1.AddMessage1_Phone.focus();
  return false;
 }else
 {
    if(!document.Form1.AddMessage1_Phone.value.length>7)
    {
      alert("您输入的电话位数不对！");
  event.cancelBubble=true;
  event.returnValue=false;
  document.Form1.AddMessage1_Phone.focus();
  return false;
    }
 }
 //联系地址
 document.Form1.AddMessage1_ContactAddress.value = document.Form1.AddMessage1_ContactAddress.value.Trim(); 
 if(document.Form1.AddMessage1_ContactAddress.value == "")
 {
  alert("请输入联系地址");
  event.cancelBubble=true;
  event.returnValue=false;
  document.Form1.AddMessage1_ContactAddress.focus();
  return false;
 }
 //邮编
 document.Form1.AddMessage1_Postcode.value = document.Form1.AddMessage1_Postcode.value.Trim(); 
 if(document.Form1.AddMessage1_Postcode.value == "")
 {
  alert("请输入邮编");
  event.cancelBubble=true;
  event.returnValue=false;
  document.Form1.AddMessage1_Postcode.focus();
  return false;
 }
 //QQ
 document.Form1.AddMessage1_QQ.value = document.Form1.AddMessage1_QQ.value.Trim(); 
 //MSN
 document.Form1.AddMessage1_MSN.value = document.Form1.AddMessage1_MSN.value.Trim(); 
 if(document.Form1.AddMessage1_MSN.value == "")
 {
  /*alert("请输入MSN地址");
  event.cancelBubble=true;
  event.returnValue=false;
  document.Form1.AddMessage1_MsgMSN.focus();
  return false;*/
 }
 else
 {
  rege=/^([a-zA-Z0-9]+[_|/-|/.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|/-|/.]?)*[a-zA-Z0-9]+/.[a-zA-Z]{2,3}$/;
  /*if (!rege.test(document.Form1.MSN.value))
  {
   alert("MSN地址不合法");
   event.cancelBubble=true;
   event.returnValue=false;
   document.Form1.MSN.focus();
   return false;
  }*/
 }
 //Email
 document.Form1.AddMessage1_Email.value = document.Form1.AddMessage1_Email.value.Trim(); 

 if(document.Form1.AddMessage1_Email.value == "")
 {
  /*alert("请输入E_mail地址");
  event.cancelBubble=true;
  event.returnValue=false;
  document.Form1.AddMessage1_Email.focus();
  return false;*/
 }
 else
 {
  rege=/^([a-zA-Z0-9]+[_|/-|/.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|/-|/.]?)*[a-zA-Z0-9]+/.[a-zA-Z]{2,3}$/;
  if (!rege.test(document.Form1.AddMessage1_Email.value))
  {
   alert("Email地址不合法");
   event.cancelBubble=true;
   event.returnValue=false;
   document.Form1.AddMessage1_Email.focus();
   return false;
  }
 }
 
}  

common.js:常见的javascript函数列表
04-29
common.js 常见的javascript函数列表 ＃职能 intval floatval isString moneyFormat isNumber trim empty isset isPhone isEmail isBankCard isChinaName isIdentityNumber isMobile numberCheck reload buildUrl ...
Javascript中实现trim()函数的两种方法
12-09
在JavaScript中我们需要用到trim的地方很多，但是JavaScript又没有独立的trim函数或者方法可以使用，所以我们需要自己写个trim函数来实现我们的目的。 方案一： 以原型方式调用，即obj.trim()形式，此方式简单且使用...
JS中常见的 “函数名 is not a function” 错误
热门推荐
weixin_40345099的博客
09-30 28万+
js中常见的错误，例如Uncaught TypeError: x is not a function 其原因除了函数本身有错之外，还有一种很奇怪的情况：函数本身没有错，但是运行时就是不能正常运行。这种情况与javascript的特性有关：变量与函数声明前置的优先级。 首先看代码： console.log(x) console.log(x()); var x=1; function x(){...
控制台报错：value.trim is not a function
weixin_41886421的博客
12-05 1538
控制台报错：value.trim is not a function
js怎么不能用trim()啊
evilcry2012的专栏
10-21 2066
js怎么不能用trim()啊 function checkid() {        var txtid = document.getElementById("txtid").value;        if (txtid.Trim() == "") {            alert("帐号不能为空");        }    } trim()方法 报错了啊?    啊啊 可以用什么代
JQuery 基本方法报错：... is not a function的问题
zcy_csdn123的博客
09-07 1万+
是否碰到过类似问题（前提是正确引入了JQuery） 看图说问题<input type="file" name="pic1" id="pic1" onchange="preview(this)" multiple="multiple">其实是：JQuery选择器得到的元素对象，和JavaScript获取元素对象 的问题上面两张图是我对 input元素的获取，使用的两种方式，pic1用的是原生JS
trim();方法使用问题
zilvzsy的博客
07-18 8115
记笔记，方便回忆。自己就是这样写然后总报错。网上查了下如下： document.getElementById("mobile").value.trim(); //可以 在ie 7 8浏览器中，如果使用trim()属性去除空格的话，则会导致报错。  $("#account").val().trim(); 在网上找了可写成如下： $.trim($("#account").val());...
javascript在IE下trim函数无法使用的解决方法
12-07
本文实例分析了javascript在IE下trim函数无法使用的解决方法，对于web前段设计有一定的借鉴价值。具体分析如下： 首先，javascript的trim函数在firefox下面使用没有问题： [removed] var test1 = " aa "; test1 =...
JavaScript trim 去除字符串空格的三种方法(附代码详解)
12-08
– //出处:网上搜集 //For more visit //www.jb51.net // Trim() , Ltrim() , RTrim() String.prototype.Trim = function() { return this.replace(/(^\s*)|(\s*$)/g, “”); } String.prototype.LTrim = function()...
vue “xxx” is not a function 解决方法
qq_36416905的博客
09-24 4万+
问题出现在同学代码的函数名和el-dialog框的visible.sync里的参数重名了,把两个改成不一样的名字就好了 所以一定不要偷懒取一个名字= = 容易混淆还影响函数执行，可能之后更了解Vue会明白为啥这样报错吧。 尽量不要把很多名字取得一样 不然问题就很大 ...
javascript Uncaught TypeError: s is not a function。调用函数未定义问题。看完这篇你就懂了
王威振的博客
06-09 6534
我们来定义一个函数表达式 var s = function(){ console.log("我被执行了"); } 接下来调用 s(); 是不是没问题。那我们换一种姿势再试一次； 什么情况？为啥报错了。是不是有点疑惑。调用的函数。放到函数表达式前，就报错了。找不到此函数。 这是因为函数存在提升问题。函数表达式不存在提升。也就是说。如果定义一个函数而非函数表达式操作以上步骤是没问题的 我们来试下。 所以如果定义函数表达式。我们一定要放在调用方法之前。因为函数表达式不存在提升..
JS异常处理：Uncaught TypeError: xxx is not a function at HTMLAnchorElement.onclick
有范管理美学 | 公众号/头条号：有范管理美学
01-09 7万+
JS异常处理：Uncaught TypeError: xxx is not a function at HTMLAnchorElement.onclick  ---- 关于标签调用onclick中的方法无效的原因 今天在优化别人写的代码时，出了个错误。 原代码如下，我想把href属性函数改为onclick事件 a href="javascript:search();
android n编译卡死,【报Bug】HX编译nvue在android真机上报错
weixin_33362096的博客
05-26 384
17:05:13.856 TypeError: value.trim is not a function17:05:13.862 at addHandler (D:\HBuilderX.1.9.9.20190522.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-hbuilderx\packag...
遇到value.indexOf is not a function问题的原因以及解决方法
KMINLIKE的博客
12-13 7173
前端遇到的问题解决
原因：value.trim is not a function
最新发布
08-05
<think>我们正在处理一个JavaScript错误：`value.trim is not a function`。这个错误通常发生在试图对一个非字符串类型的值调用字符串方法`trim()`时。下面我们来分析原因并提供解决方案。 ### 错误原因分析 1. **非字符串类型调用`trim()`**： - `trim()`是字符串原型上的方法，只能用于字符串。 - 当对非字符串（如`null`、`undefined`、数字、对象、数组等）调用`trim()`时，就会抛出`xxx is not a function`错误[^4]。 2. **常见场景**： - **表单处理**：从输入框获取的值可能是`null`或`undefined`。 - **API响应数据**：后端返回的数据类型与预期不符（如预期字符串但返回数字）。 - **变量赋值错误**：变量可能被意外赋值为非字符串类型。 ### 解决方案 #### ✅ 方案1：确保值为字符串类型后再调用`trim()` ```javascript // 使用String()转换后再调用trim const trimmedValue = String(value).trim(); // 或使用空字符串作为默认值 const trimmedValue = (value || '').trim(); ``` #### ✅ 方案2：添加类型检查（防御性编程） ```javascript function safeTrim(value) { return typeof value === 'string' ? value.trim() : ''; } // 使用示例 const result = safeTrim(possibleNonString); ``` #### ✅ 方案3：修复数据源（推荐） - 如果是表单输入，确保初始化空字符串而非`null`： ```javascript // Vue示例 data() { return { form: { username: '' // 初始化为空字符串而非null } } } ``` - 如果是API返回问题，协调后端确保返回字符串类型或在前端处理： ```javascript // 处理API响应 api.getData().then(response => { // 确保字符串类型 const data = response.data.map(item => ({ ...item, name: item.name || '' // 避免null })); }); ``` #### ✅ 方案4：使用可选链操作符（现代JavaScript） ```javascript // 当value可能为null/undefined时 const trimmedValue = value?.trim?.() || ''; ``` ### 错误示例分析 ```javascript // 错误示例：value可能是数字或null const value = 123; // 或 null console.log(value.trim()); // TypeError: value.trim is not a function ``` ### 修复后示例 ```javascript // 正确：转换为字符串 const value = 123; console.log(String(value).trim()); // "123" // 正确：使用默认值 const value = null; console.log((value || '').trim()); // "" ``` ### 最佳实践 1. **始终验证输入类型**：使用`typeof`检查字符串类型。 2. **初始化默认值**：在数据源处避免`null`/`undefined`。 3. **使用工具函数**：封装`safeTrim`等工具函数统一处理。 4. **现代语法**：可选链操作符`?.`和空值合并`??`能简化代码。 ### 流程图：处理流程 ```mermaid graph TD A[调用trim] --> B{值为字符串？} B -->|是| C[正常trim] B -->|否| D[转换为字符串] D --> E[执行trim] ``` ### 相关问题 1. JavaScript中如何安全地调用可能不存在的方法？ 2. 如何处理API返回的意外数据类型？ 3. 表单输入处理中如何避免空值错误？ 通过以上方法，我们可以有效解决`value.trim is not a function`错误，确保代码的健壮性。</think>## JavaScript `value.trim is not a function` 错误解析与解决方案 ### 错误原因分析 1. **非字符串类型调用字符串方法**： - `trim()` 是字符串原型方法，只能用于字符串类型 - 当对非字符串值（如 `null`、`undefined`、数字、对象或数组）调用 `trim()` 时会出现此错误[^4] 2. **常见触发场景**： - 表单输入值未初始化（默认为 `null` 或 `undefined`） - API 返回意外数据类型（如数字代替字符串） - 变量赋值错误（意外赋值为非字符串值） - 异步操作中值尚未准备好 --- ### 解决方案（按优先级推荐） #### ✅ 方案1：确保值为字符串类型 ```javascript // 方法1：使用String()转换 const safeValue = String(value).trim(); // 方法2：空值保护 const trimmedValue = (value || "").trim(); ``` #### ✅ 方案2：添加类型检查 ```javascript function safeTrim(input) { return typeof input === "string" ? input.trim() : ""; } // 使用示例 const processed = safeTrim(formData.username); ``` #### ✅ 方案3：修复数据源（推荐） ```javascript // Vue 示例：初始化表单值为空字符串 data() { return { form: { username: "" // 而非 null 或 undefined } } } // React 示例：设置输入默认值 <input defaultValue="" onChange={e => setValue(e.target.value.trim())} /> ``` #### ✅ 方案4：使用现代语法（ES2020+） ```javascript // 可选链操作符 + 空值合并 const result = value?.trim?.() ?? ""; // 类型安全转换 const cleanValue = typeof value === "string" ? value.trim() : ""; ``` --- ### 错误示例与修复对比 ```javascript // ❌ 错误代码（value 可能是 null） const username = value.trim(); // ✅ 修复方案1（空值保护） const username = (value || "").trim(); // ✅ 修复方案2（类型检查） const username = typeof value === "string" ? value.trim() : ""; ``` --- ### 最佳实践建议 1. **初始化策略**： - 始终为表单字段初始化空字符串 `""` - 使用 TypeScript 定义接口确保类型安全： ```typescript interface UserForm { username: string; // 明确字符串类型 age: number; } ``` 2. **防御性编程**： ```javascript // 函数入口处验证 function processInput(input) { if (typeof input !== "string") { console.warn("Invalid input type"); return ""; } return input.trim(); } ``` 3. **现代框架实践**： - **Vue**：使用 `v-model.trim` 指令自动处理 ```html <input v-model.trim="username"> ``` - **React**：在事件处理中转换 ```javascript const handleChange = (e) => { setValue(e.target.value.trim()); } ``` --- ### 调试流程图 ```mermaid graph TD A[遇到错误] --> B{检查 value 类型} B -->|字符串| C[正常调用 trim] B -->|null/undefined| D[转换为空字符串] B -->|数字| E[String(value).trim] B -->|对象/数组| F[检查数据源逻辑] ``` --- ### 相关问题 1. JavaScript 中如何安全地处理 `null` 和 `undefined` 值？ 2. TypeScript 如何帮助避免这类类型错误？ 3. Vue/React 中处理表单输入的最佳实践是什么？ 通过以上方法，您可以彻底解决 `value.trim is not a function` 错误，并建立更健壮的前端数据处理机制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值