setPhone(formatAsYouType(e.target.value, 'US'))}
placeholder="Enter phone number"
/>
{validatePhoneNumber(phone, 'US') && (
Formatted: {formatPhoneNumber(phone, 'US')}
)}
);
}
```
### 3\. 节点js(API/服务层)
#### 普通JS( 必需)
```js
// server.js or api.js
const {
formatPhoneNumber,
validatePhoneNumber,
parsePhone
} = require('@foodhubglobal/phone');
// Usage in Express.js API route
const express = require('express');
const app = express();
app.post('/validate-phone', (req, res) => {
const { phone, country } = req.body;
if (validatePhoneNumber(phone, country)) {
const formatted = formatPhoneNumber(phone, country);
res.json({ valid: true, formatted });
} else {
res.status(400).json({ valid: false, error: 'Invalid phone number' });
}
});
// Usage with detailed parsing
app.get('/parse-phone/:phone', (req, res) => {
const result = parsePhone(req.params.phone, req.query.country);
res.json(result);
});
```
#### ES模块(进口) - 节点.js 12+或有"类型":"模块"
```js
// server.mjs or package.json has "type": "module"
import {
formatPhoneNumber,
validatePhoneNumber,
parsePhone
} from '@foodhubglobal/phone';
// Usage in Express.js API route (ES Modules)
import express from 'express';
const app = express();
app.post('/validate-phone', (req, res) => {
const { phone, country } = req.body;
if (validatePhoneNumber(phone, country)) {
const formatted = formatPhoneNumber(phone, country);
res.json({ valid: true, formatted });
} else {
res.status(400).json({ valid: false, error: 'Invalid phone number' });
}
});
```
#### 节点.js中的脚本类型
```ts
// api.ts or server.ts
import {
formatPhoneNumber,
validatePhoneNumber,
parsePhone,
type CountryCode
} from '@foodhubglobal/phone';
// Usage in Express.js API route (TypeScript)
import express, { Request, Response } from 'express';
const app = express();
app.post('/validate-phone', (req: Request, res: Response) => {
const { phone, country }: { phone: string; country?: CountryCode } = req.body;
if (validatePhoneNumber(phone, country)) {
const formatted = formatPhoneNumber(phone, country);
res.json({ valid: true, formatted });
} else {
res.status(400).json({ valid: false, error: 'Invalid phone number' });
}
});
```
### 4\. 纯JavaScript项目(浏览器/Vanilla JS)
#### HTML 有脚本标记 (浏览器)
```html